Top 10 Plugins to Enhance DevOps in Webpack
Tags: webpack, javascript, devops, showdev
Published: 2021-05-21 01:21:17


![](https://cdn-images-1.medium.com/max/7832/1*IvMgMZlU9DRC1m5ZiOTk5g.png)

## Top 10 Tips for Configuring Automated Plugins to Enhance DevOps in Webpack

Webpack is a packaging tool whose purpose is to pack all static resources. Some people will ask why is webpack needed? Webpack is the cornerstone of modern front-end technology. Conventional development methods such as jQuery, HTML, and CSS static web page development have fallen behind. Now is the era of MVVM and data-driven interfaces. Webpack packs all kinds of new and useful technologies in modern JavaScript development.

Trying to describe webpack can be overwhelming, so I won’t waste everyone’s time. Understand this picture to know the ecosystem of webpack:

## **1. Loader Lists**

[**raw-loader](https://webpack.js.org/loaders/raw-loader/)**: Load the original content of the file (UTF-8)
[**file-loader](https://webpack.js.org/loaders/file-loader/)**: output the file to a folder, and use the relative URL to refer to the output file in the code (processing pictures and fonts)
[**url-loader](https://webpack.js.org/loaders/url-loader/)**: Similar to file-loader, the difference is that the user can set a threshold, if the threshold is greater than the threshold, it will be handed over to the file-loader for processing, and when the threshold is less than the threshold, it will return the file base64 format encoding (processing pictures and fonts)
**source-map-loader**: Load additional Source Map files to facilitate breakpoint debugging
**svg-inline-loader**: Inject compressed SVG content into the code
**image-loader**: load and compress image files
json-loader loads JSON files (included by default)
**handlebars-loader**: Compile the Handlebars template into a function and return
**babel-loader**: Convert ES6 to ES5
**ts-loader**: Convert TypeScript to JavaScript
**awesome-typescript-loader**: Convert TypeScript to JavaScript, performance is better than ts-loader
**sass-loader**: Convert SCSS/SASS code to CSS
**css-loader**: Load CSS, support modularization, compression, file import and other features
**style-loader**: Inject CSS code into JavaScript, and load CSS through DOM manipulation
**postcss-loader**: Extend CSS grammar, use next-generation CSS, and automatically fill in CSS3 prefixes with the autoprefixer plug-in
**eslint-loader**: Check JavaScript code through ESLint
**tslint-loader**: Check TypeScript code through TSLint
**mocha-loader**: Load the code for Mocha test cases
**coverjs-loader**: Calculate the coverage of the test
**vue-loader**: Load Vue.js single file component
**i18n-loader**: Internationalization
**cache-loader**: It can be added before some loaders with high performance overhead, the purpose is to cache the results to disk

## **2. Webpack Dashboard**

When using webpack, especially for a dev server, you are probably used to seeing something very long and difficult to read. However, webpack dashboard helps you to save time from reading the actual configuration:

![](https://cdn-images-1.medium.com/max/2000/0*aV1RmH1NcMKYWZQs)

To install:

    $ npm install --save-dev webpack-dashboard
    # ... or ...
    $ yarn add --dev webpack-dashboard

Adding config to the webpack:

    // Import the plugin:
    const DashboardPlugin = require("webpack-dashboard/plugin");
    
    // Add it to your webpack configuration plugins.
    module.exports = {
      // ...
      plugins: [new DashboardPlugin()];
      // ...
    };

## **3. Webpack Merge**

[**webpack-merge](https://www.npmjs.com/package/webpack-merge)** provides a merge function that concatenates arrays and merges objects creating a new object. If functions are encountered, it will execute them, run the results through the algorithm, and then wrap the returned values within a function again.

![](https://cdn-images-1.medium.com/max/4744/1*3JiR700_PZ2DVvwpVocBqA.gif)

This behavior is particularly useful in configuring webpack although it has uses beyond it. Whenever you need to merge configuration objects, **webpack-merge** can come in handy.

    const { merge } = require('webpack-merge');
    
    // Default API
    const output = merge(object1, object2, object3, ...);
    
    // You can pass an array of objects directly.
    // This works with all available functions.
    const output = merge([object1, object2, object3]);
    
    // Keys matching to the right take precedence:
    const output = merge(
      { fruit: "apple", color: "red" },
      { fruit: "strawberries" }
    );
    console.log(output);
    // { color: "red", fruit: "strawberries"}

## **4. Speed Measurement Plugin**

The first step to optimising your webpack build-speed, is to know where to focus your attention.

This plugin measures your webpack build speed, giving an output like this:

![](https://cdn-images-1.medium.com/max/2000/0*EfyFV0EaZ00MFZ7e.png)

To install:

    npm install --save-dev speed-measure-webpack-plugin

    yarn add -D speed-measure-webpack-plugin

Adding config to the webpack:

    const webpackConfig = {
      plugins: [new MyPlugin(), new MyOtherPlugin()],
    };

## **5. Size Plugin**

Prints the gzipped sizes of your webpack assets and the changes since the last build.

![](https://cdn-images-1.medium.com/max/2408/0*_-v-g2F-qavukMUi)

To install:

    
    Install size-plugin as a development dependency using npm:

    npm i -D size-plugin

Adding config to the webpack:

    // webpack.config.js
    + const SizePlugin = require('size-plugin');
    
    module.exports = {
      plugins: [
    +    new SizePlugin()
      ]
    }

## **6. Hot Module Replacement Plugin**

Webpack’s hot update is also called Hot Module Replacement, abbreviated as HMR. This mechanism can replace the old module with the newly changed module without refreshing the browser.

The core of HMR is that the client pulls the updated file from the server. To be precise, it is chunk diff (the part of the chunk that needs to be updated). In fact, a Websocket is maintained between WDS and the browser. When local resources change, WDS will push updates to the browser, and bring the hash when it is built, so that the client can compare with the last resource. After comparing the differences, the client will initiate an Ajax request to WDS to obtain the changed content (file list, hash), so that the client can use this information to continue to initiate a jsonp request to WDS to obtain incremental updates of the chunk.

The subsequent parts — how to deal with the incremental update? Which state should be retained? Which need to be updated? — is completed by HotModulePlugin, which provides related APIs for developers to process for their own scenarios, such as react-hot-loader and Vue-loader uses these APIs to implement HMR.
[**HotModuleReplacementPlugin | webpack**](https://webpack.js.org/plugins/hot-module-replacement-plugin/)

    config.plugins = config.plugins.concat([
     **new** webpack.optimize.OccurenceOrderPlugin(),
     **new** webpack.[**HotModuleReplacementPlugin](https://www.codota.com/code/javascript/functions/webpack/HotModuleReplacementPlugin)**(),
     **new** webpack.NoErrorsPlugin()
    ]);

## **7. File Hash**

**Hash**: Related to the construction of the entire project, as long as the project file is modified, the hash value of the entire project construction will change

**Chunkhash**: It is related to the chunks packaged by Webpack. Different entries will produce different chunkhash.

**Contenthash**: Define hash according to the content of the file. If the content of the file is unchanged, the contenthash is unchanged

    module.exports = {
      entry: {
      app: './scr/app.js',
      search: './src/search.js'
    },
      output: {
      filename: '[name][chunkhash:8].js',
      path:__dirname + '/dist'
      }
    }

## **8. CSS Autoprefix**

The autoprefixer in postcss can be used to add response prefixes to some properties in CSS3 that need to be compatible with writing, which saves us a lot of time Since it is also a loader, we also need to install it first:

    npm i postcss-loader autoprefixer -D

Creating **postcss.config.js **and import into the webpack config:

    module.exports = { plugins: [require('autoprefixer')]  }

Adding config to the webpack:

    module.exports = {
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader', 'postcss-loader']
                }
            ]
        }
    }

## **9. Webpack Bundle Analyzer**

Visualize size of webpack output files with an interactive zoomable treemap.

![](https://cdn-images-1.medium.com/max/2000/0*cQGCCuaVDpXOgpRd.gif)

To install:

    # NPM
    npm install --save-dev webpack-bundle-analyzer
    # Yarn
    yarn add -D webpack-bundle-analyzer

Adding config to the webpack:

    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    
    module.exports = {
      plugins: [
        new BundleAnalyzerPlugin()
      ]
    }

## **10. Progress Bar Webpack Plugin**

![](https://cdn-images-1.medium.com/max/2000/0*lI54xycS-X7zq7YO.gif)

To install:

    npm i -D progress-bar-webpack-plugin

Adding config to the webpack:

    var ProgressBarPlugin **=** require('progress-bar-webpack-plugin');

    plugins**:** [

    **new** ProgressBarPlugin({      
        format: 'build [:bar] ' + chalk.green.bold(':percent') + '(:elapsed seconds)', clear: false    })

    ]

At this point, we have completed the basic configuration. But this is not perfect, or sometimes, we will have some other needs. The next article on webpack configuration will introduce some other situations. Thank you for reading.

More content at **[https://shijiezhou.com/blog]**(https://shijiezhou.com/blog)