Build an application with Webpack (Part 2)

Today, I have come back to you and we will continue to learn about Webpack. In this section, I want to introduce to you about plugins, optimizations.

1. What's the Plugin?

While Loader will transform files one by one, the plugin performs actions or functions on the compilation or chunk.

To use a plugin, you need to require() and add it to array plugins.

To be honest, when using development/production mode in Webpack we used a lot of default plugins in Webpack.

2. Several plugins?

a. html-webpack-plugin

This plugin will generate an HTML5 file for you that includes all your webpack bundles in the body using script tags.

This is especially useful for webpack bundles that include a hash in the filename which changes every compilation.

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

b. clean-webpack-plugin

This plugin will remove all files inside webpack’s output.path directory, as well as all unused webpack assets after every successful rebuild.

If using webpack 4+, everything under <PROJECT_DIR>/dist/ will be removed without this plugin.

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpackConfig = {
  plugins: [ new CleanWebpackPlugin() ],
};
module.exports = webpackConfig;

c. mini-css-extract-plugin

This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.

It’s recommended to combine mini-css-extract-plugin with the css-loader

It requires webpack 4+ to work. Alternatively, you can use extract-text-webpack-plugin for older versions.

The reason for using mini-css-extract-plugin:

• Async loading CSS.
• No duplicate compilation (performance).
• Easier to use
• Specific to CSS

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: (resourcePath, context) => {
                return path.relative(path.dirname(resourcePath), context) + '/';
              },
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};

d. uglifyjs-webpack-plugin

This plugin can take multiple chunks, parse them in sequence, and apply any compression options.

module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        output: {
            comments: false,
        },      
      }),
    ],
  },
};

e. HotModuleReplacementPlugin

Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload.

HMR should never be used in production and only used in development.

new webpack.HotModuleReplacementPlugin({
  // Options...
});

In app.js, module.hot will have true value in development and false in production.

if (module.hot) {
  module.hot.accept()
}

f. Others

• ManifestPlugin
• InlineChunkHtmlPlugin
• ModuleNotFoundPlugin
• WatchMissingNodeModulesPlugin

3. How to optimize performance in Webpack?

Although the plugins in Webpack are able to solve performance issues, it is also significant. Therefore, code splitting was born to help significantly improve performance.

It allows us to split code into smaller bundles, which we can download as needed or download in parallel.

There are 2 types of code splitting that I know:

a. By entry point

As the previous post I introduced, Webpack uses entry and output to apply code splitting.

However, this is a manual way, so it will not be flexible to divide the code automatically.

It only supports input files, while imported libraries will still be duplicated. So, we will apply to prevent duplication using split chunks in Webpack.

b. By optimization.splitChunks

This allows us to extract functions, libraries, … into a single entry or create a new chunk.

Example of using it to cancel duplication of lodash library usage inside js files.

module.exports = {
  optimization: {
    splitChunks: {
        chunks: 'all'
    }
  },
};

If you use older versions of Webpack (smaller than version 4), you must use CommonsChunkPlugin to replace it.

According to the webpack documentation, optimization.splitChunks has more improvements than CommonsChunkPlugin: better cache, Split common chunk more,…

In conclusion

Webpack is actually quite complex to understand and learn. However, if you want to become a frontend expert then you cannot ignore it

These are completely my practical experiences. If anything is incorrect, please comment below the post.

Have a good day!!!