In the first part of this article we took stock of Gulp's job as part of our front-end build process, in order to replace it with webpack which is better suited for the js module system and code-on-demand approach rather than just one single project albeit optimized package.

What is webpack?

webpack is a module bundler, that takes modules with dependencies and generates static assets.

In JavaScript, modules are small pieces of independent and reusable code which expose (export) some of their components (objects) for other modules that require them.

If the above paragraph felt like visibility/accessibility modifiers to you, it's ok to feel that way.

One of the benefits of the module system in JavaScript is that it tackles the problem of JavaScript code in the global scope, which hampers perfomance and makes development more difficult due to side-effects that can be hard to trace.

ES6 introduced native support for JavaScript modules for the first time, and it is yet to have widespread support in browsers. Before ES6 the two popular approaches to the module system are CommonJS Modules and AMD. We can enjoy the benefits today by using a transpiler like Babel, which converts modern JavaScript code to browser supported ES5 code. But I digress, you can read more about JavaScript modules on airpair

Webpack approaches every static asset as a module and looks out for their dependencies and loads them as needed depending on an entry point's dependencies. This provides a big performance boost for large projects that can have multiple dependencies.

Setting up our webpack project

Our webpack project setup is similar to our Gulp project. A src/ directory with our development assets and a dist/directory for the buid output.

You can clone the Github repo here. cd into the webpack-build directory and run yarn to setup the tools we'll be using for the webpack build.

webpack configuration.

Like Gulp's configuration file, gulpfile.js, webpack uses a configuration file, webpack.config.js to manage its build process. At the very basic-level a webpack config file consists of entry-point(s) files and corresponding output(s) files. An entry point represents a module and the dependencies specified in the code are processed and bundled to the output.

To build your webpack bundle with this basic configuration all you need is to run webpack from the command-line

webpack

and webpack will output the processed file in the path specified in the config file's output property.

webpack is able to process JavaScript naturally, if a module needs non-JavaScript modules, webpack uses loaders and plugins to process these resources.

We have a number of non-JS resources in our project such as css, and sass. Let's see how all these come together.

Rebuilding our project with webpack

For our build, we'll be requiring a number of modules from our entry file ./src/js/app.js.

There are quite a number or modules being required here, some are third-party JavaScript modules, custom JavaScript modules, Sass files, etc. Remember we can also require other static assets like images or even fonts in our modules, and with the appropriate loader, webpack will treat them as a module.

Luckily, in the first part of this post we took stock of the job description for our front-end build, It comes in handy as we upgrade our basic webpack configuration to handle the entire project.

Job Description
 webpack config
1 1. stream and concatenate source javacript files
2. transpile and minify ES6 code for use in browsers
3. generate file hash and rename file for cache bursting
4. copy the renamed file to the js build directory
5. update the project manifest with a reference to the new file
1. parse all the required js in the entry file with babel-loader to transpile any the ES6 to browser friendly code
2. use webpack's [chunkhash] to rename the file for content-dependent cache busting
3. copy the processed js bundle to the path specified by the config output property
2 1. stream and compile css and scss style sheets to css
2. generate file hash and rename file for cache bursting
3. copy the renamed file to the css build directory
4. update the project manifest with a reference to the new file		 1. use the extract-text-webpack-plugin together with css-loader and sass-loader to convert and extract any stylesheet required by the entry module.
2. append the extracted stylesheet with the [contenthash:8] for content dependent cache busting.
3. copy the extracted stylesheet to the path specified in the extract-text-webpack-plugin.
4. remove unused styles from the stylesheet with purifycss-webpack plugin
3 1. move images to the images build directory
 1. use copy-webpack-plugin to move modified images to the build directory
4 1. stream the manifest file and all the view html files
2. replace the assets (css and js) reference in the view files with the corresponding hashed file name from the manifest file.
3. move the html files to the build directory
 1. html-webpack-plugin plugin will generate an HTML5 files that includes all your webpack bundles in the body using script tags. The CSS extracted with the ExtractTextPlugin will be included with tags in the HTML head.

Based on the job description, we can now upgrade our webpack config file as follows:

Matching the job description in the table with the upgraded file makes it easy to follow what is happening in the webpack config file.

Now you are ready to build with this new configuration and take your project live. Our build command will be a little different, as we want webpack to optimize our files for production. Running webpack with a little modification ensures we get all the optimisation goodness

webpack -p

That should do it. From the results, we have successly replaced Gulp with webpack and our build works perfectly with all the optmisation benefits.

We have only touched the surface in this post as webpack can do a lot more. This is a good thing but it has many times made it difficult for beginners to jump into webpack as many resources move from simple stuff to advanced stuff without closing the gap. Remember you can clone the Github repo here.

If you are new to webpack, take some time to see webpack from first principles.

When you want to start your project, you'll always find it helpful to list the jobs you want done by webpack, like in the table above and then pair that with the configuration, modules, and loaders you need to make that happen.