Webpack – Getting Started

Leave a reply

How to use this tutorial ?

The table of contents of this tutorial is located on the right side

There are two projects that we need:
– the front-end website that we are going to build in this tutorial,
– GraphQL server which we are going to use later in “Adding Apollo provider and introduction to making queries to GraphQL“.

There are two GitHub repositories with the complete projects located here:
GitHub:WebpackReactReduxApolloTutorial
And the GraphQL server located here
GitHub:graphql-boilerplate

Instructions of how to set up GraphQL server could be found HERE.

When you go through each chapter you could check out the appropriate branch which contains the chapter specific code, instead of looking at the complete project.
This way will be easier to follow the developing process. Each branch name could be found at the beginning and the end of the tutorial. Look for branch-name: XXXXX

In general it would be better if you follow the tutorial and build the website yourself but if you get stuck somewhere feel free to clone the repository and check out the appropriate branch.

Setting up the project

branch-name:  
Click To Copy

 

mkdir babel-webpack-boilerplate
cd babel-webpack-boilerplate
yarn init -y
yarn add webpack webpack-cli --dev

What we just did:
– line 1: created project’s folder
– line 2: navigate to project’s folder root
– line 3: executing yarn init -y initialized our new project. – y simply means ‘answer yes and use the default init settings’. A package.json is created, which is used to describe the npm project dependencies and executable scripts.
– line 4: we added Webpack as a dev dependency (–save-dev) in our project.

Creating project’s files

Using your favorite text editor create index.html in the root folder of the project, with plain html, and a script tag to include our bundled Java Script code (Line 9).

./index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Babel Webpack Boilerplate</title>
    </head>
    <body>
        <h1>Babel Webpack React Boilerplate</h1>
        <script type="text/javascript" src="dist/main-bundle.js"></script>
    </body>
</html>

Create folder to store the actual bundle files:

mkdir ./src

Create the actual bundle files:

src/app.js

import test from './test';
test('Babel is running!');

src/test.js 

const test = (msg) => {
  console.log(msg);
}
export default test;

and dist folder to store compiled bundle:

mkdir ./dist

The project’s layout should look like this:

babel-webpack-react-boilerplate
├── dist
├── index.html
├── node_modules
├── package.json
├── src
|        ├── app.js
|       └── test.js
└─ package.lock

* package.lock is used to describe which versions of node modules are installed, and is create automatically after executing npm install, so don’t worry if it’s not there yet.

Running Webpack and creating Java Script bundle.

Now we have laid out a simple project, let’s create a bundle and run it.
In the terminal in the project’s root folder execute

./node_modules/webpack/bin/webpack.js ./src/app.js -o ./dist/main-bundle.js

What we just did:
– we called Webpack from the command line.
– passed the entry point ./src/app.js to create the bundle.
– and the output file -o ./dist/main-bundle.js

Now if we look at the ./dist folder, we will see that the bundle.js is created.

Testing the project

Open your browser and navigate to the the project’s root.

Look at the console and you will see ‘Babel is running!’.

Congratulations, you just created your first bundle!

branch-name:  
Click To Copy

 

 

where to go from here ?

Leave a Reply