Kanishkar J

Configuring Webpack 4 (Part 4) Production and Code splitting

14.05.2018 — Webpack, Web Development — 1 min read

In this post we’ll make some changes to our configuration so that the finally built files are ready for production. If you notice, /dist/assets/js/app.bundle.js is a huge file. Now as we start using more libraries the file gets bigger and bigger. That impacts the performance of the application as the browser will have to load bigger files. One way to reduce the file size is to minimize the js files.

Minimizing JS files

To minimze files we use uglifyjs-webpack-plugin. To configure it, we first import webpack.common.js in webpack.prod.js :

webpack.prod.js

1const merge = require('webpack-merge');
2const common = require('./webpack.common.js');
3const webpack = require('webpack');
4module.exports = merge(common, {
5  
6});

Now run the follwing on command line to install uglifyjs-webpack-plugin :

1npm i -D uglifyjs-webpack-plugin

Lets import it inside our file :

1// ...
2const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

The config for minimzing the files :

1module.exports = merge(common, {
2      devtool: 'source-map',
3      plugins: [
4        new UglifyJSPlugin({
5          sourceMap: true
6        })
7      ]
8    });

devtool: 'source-map' : A full SourceMap is emitted as a separate file. It adds a reference comment to the bundle so development tools know where to find it.

Run npm run build:prod in the command line. Now if you open /dist/assets/js/app.bundle.js you’ll notice the code has been minified, i.e the whole code is in one line.

We’ll also specify that Node js is running under production mode, so that webpack can manage the libraries accordingly, i.e webpack can remove the testing libraries while bundling. So lets add another plugin to the plugins array :

1new webpack.DefinePlugin({
2  'process.env.NODE_ENV': JSON.stringify('production')
3})

So at the end of this we have :

webpack.prod.js

1const merge = require('webpack-merge');
2const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
3const common = require('./webpack.common.js');
4const webpack = require('webpack');
5module.exports = merge(common, {
6    devtool: 'source-map',
7    plugins: [
8        new UglifyJSPlugin({
9            sourceMap: true
10        }),
11        new webpack.DefinePlugin({
12            'process.env.NODE_ENV': JSON.stringify('production')
13        })
14    ]
15});

Code Splitting in Webpack

Code splitting in webpack is implemented using chunks. This can be used to improve performance of the application. For better understanding lets create another set of Js, Sass and HTML files.

/src/assets/scss/page.scss

1$bgcolor: gray;
2body {
3    background: $bgcolor;
4}

/src/assets/js/page.js

1import '../scss/page.scss';
2let temp = "page.js";
3const func = (val) => console.log(val);
4func(temp);

/src/page.html

1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <title>Page Title</title>
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8</head>
9<body>
10    <h1>Page Chunk</h1>
11</body>
12</html>

We’ll have to make some modifications in webpack.common.js to load these new files that we created :

Add another entry point

1const config = {
2  entry: {
3    app: './assets/js/app.js',
4    page: './assets/js/page.js'
5  },
6  // ...
7}

Here app and page are chunk names. Chunks are basically names used to identify bundles. Lets test it, run npm run build. You should see 2 different files created app.bundle.js and page.bundle.js . But if you remember we didn’t specify any output path for the other file. That wasn’t a problem as the specifed output path was [name].bundle.js, hence a file is created for each chunk and named as specified.

Specify the Chunks in HTML Plugin

1const config = {
2    // ...
3    plugins: [
4        // ...
5        new HtmlWebpackPlugin({
6            filename: 'index.html',
7            template: 'index.html',
8            chunks: ['app']
9        }),
10        new HtmlWebpackPlugin({
11            filename: 'page.html',
12            template: 'page.html',
13            chunks: ['page']
14        }),
15    ]
16}```
17
18We have created a new instance of HTMLWebpackPlugin with the configuration for *page.html*. Now below it we have added a new line called chunks, which is an array that defines all the chunks the particular html file will be using. On building the project you’ll notice that 2 files are created *index.html* and *page.html*. On opening you’ll find that the specified js file is referenced in it.
19
20The final complete repository can be viewed [here](https://github.com/kanishkarj/webpack-html-boilerplate).
21
22Thats it I guess, we have covered the basics of how to use webpack. This should help you build your own config as per your requirements. If you run into any issue feel free to contact me :)
23
24
25export const _frontmatter = {"title":"Configuring Webpack 4 (Part 4) Production and Code splitting","tags":["Webpack","Web Development"],"date":"2018-05-14T00:00:00.000Z","slug":"/webpack-p4"}