I have learned webpack3 knowledge before, but there are still many changes after webpack4 upgrade, so THIS time I reorganize the knowledge point of Webpack4 for convenience of review in the future.

This study of Webpack 4 not only requires the ability to configure, remember the core API, it is better to understand the deeper knowledge of Webpack, such as packaging principle and so on, so I may omit some basic content, but I hope I can master Webpack through this study, so as to better deal with the future work.

1. Iterate with technology (Node, Npm, Yarn)

If a Node version update improves performance, webPack will run on top of Node and performance will improve as well.

If Npm and Yarn are updated, the new version of the package management tool may help us analyze package dependencies and make some package references more quickly in case of mutual references between modules.

2. Apply Loader to as few modules as possible

For example, when we use babel-loader, we don’t need to compile node_modules.

exclude: /node_modules/

Because node_modules is usually already compiled, it would be a waste to compile it again.

3. Use the plugin as little as possible and keep it reliable

For example, we use the plug-optimization-CSS-assets-webpack-plugin to compress CSS when we package online code, but in the development environment, we don’t need to compress CSS, so make different configurations in the two configuration files.

Package line code configuration:

This plugin can be omitted from the local development configuration file.

In addition, when we use plug-ins, it is better to use plug-ins that have been verified in the community and have better performance. Because there are some personally developed plug-ins, the performance is not guaranteed, which will affect the packaging speed.

4. Set resolve properly

4.1 extensions

This configuration item is used when importing a file and you want to configure the importing mode without writing the file suffix.

So when WebPack imports files, it looks for files with the suffix JS and JSX.

However, if we configure many types of file suffixes, then webPack will have to find the file repeatedly, which will cost performance, so we only configure the logical file in the Extensions.

4.2 mainFiles

Now we want to reference the index.js file in a folder. Is there a way for Webpack to import the index.js file by default

I can write

You can also add additional configurations

I can write

However, if there are too many configurations, the weBack packaging speed will be affected.

4.3 alias

When we write React and Vue, we often configure the alias. By aliasing the directory, webpack will find the directory when it is packed.

The equivalent of

5. Use DllPlugin to speed up webpack packaging

We had to introduce third party modules (like LoDash) during development, and every time we packaged, we re-analyzed each imported package and packaged it into our code. In fact, after the introduction of third-party modules, it usually does not change, we can package them separately to generate a file, analyze them only in the first package, and use the analysis results directly in the later package (in fact, the third-party module is packaged into a file, output through global variables).

In the webpack.config.js directory (in the configuration file directory if packaged by environment), we will create a new webapck.dll.js.

Assuming we introduce loDash as a third-party module this time, we need to add configuration to webpack.dll.js

You then need to add a command to package.json.

We then continue to refine the code by installing a plug-in

cnpm install add-asset-html-webpack-plugin --save

Copy the code

Then introduce the plug-in in webpack.common.js

Then add a plugin, which means adding a resource to the HTML. The directory of the resource is vendor.dll.js in the DLL.

We then start NPM run dev and find that the console will display a function if we type vendor. We are done in the first step. Now we need to make our code use this global variable.

Open webpack.dll. Js and add the following configuration.

This means that we will use the DLLPlugin to analyze the library, which is the global variable we output.

After analysis, a mapping file will be generated, and we can configure the path generated by the file

This will pack out an extra file.

Then add a plugin to webpack.common.js to handle the mapping for us, and the directory points to the JSON file we generated, so that it will automatically fetch vendor from the global variable. If the mapping does not exist, the code is parsed in node_modules.

And then you pack it and you see it

Before using

After using

If you have more than one mapping file, you need to configure multiple mapping files, which can also be written in the following form.

This way, Node will automatically analyze the number of files in the DLL directory and help us automatically add two plug-ins.

6. Control the package file size

Removing redundant code through Tree Shaking. SplitChunksPlugin is configured to split large files into smaller files.

7. Thread -loader, Parallel -webpack, happypack multi-process packaging

7.1 ParallelUglifyPlugin

ParallelUglifyPlugin enables serial compression of JS files to enable parallel execution of multiple child processes

First, install the Webpack-parallel-uglify-plugin

cnpm i -D webpack-parallel-uglify-plugin
Copy the code

Configure in plugins

New ParallelUglifyPlugin({workerCount: 3, // enable several sub-processes to perform concurrent compression. The default is the number of CPU cores currently running on the computer minus 1 uglifyJS: {output: {beautify:false// No need to format comments:false// do not keep comments}, compress: {warnings:falseDrop_console: // UglifyJs does not print a warning when deleting code that is not used:trueCollapse_vars // Delete all 'console' statements as collapse_varstrue// Inline variable reduce_vars that are defined but used only once:true// Extract static values that occur multiple times but are not defined as variables to reference}}})Copy the code

7.2 HappyPack

HappyPack allows Webpack to split tasks into multiple sub-processes for concurrent execution, which then send the results to the main process.

First, install Happypack

cnpm i happypack@next -D
Copy the code

Configure in module:

module: {
    rules: [{
        test: /\.js$/, // Transfer processing of.js files to the HappyPack instance with id Babel use:'happypack/loader? id=babel',
        include: path.resolve(__dirname, 'src'), exclude: /node_modules/}, {// Pass the processing of the. CSS file to the HappyPack instance whose ID is CSStest: /\.css$/,
        use: 'happypack/loader? id=css',
        include: path.resolve(__dirname, 'src')}}]Copy the code

Configure in plugins

New HappyPack({id: {HappyPack})'babel'Loaders: [{loader:} loaders: [{loader:] loaders: [{loader:] loaders: [{loader:]'babel-loader',
            query: {
                presets: [
                    "env"."react"
                ]
            }
        }]
    }),
    new HappyPack({
        id: 'css',
        loaders: ['style-loader'.'css-loader'], threads: 4, // starts several sub-processes to handle this type of file verbose:true})]Copy the code

8.sourceMap

In conjunction with the previous sourceMap article, package with different sourceMap in different environments.

In normal development, it is recommended to use cheap-module-eval-source-map, which provides complete error notification and faster packaging.

Cheap -module-source-map is recommended for online code that also needs a map.

conclusion

In addition to these methods, in fact, there are many ways to improve the packaging speed, which requires us to continue to accumulate in daily life, so we should be good at summarizing in daily development, and record the good methods used to lay a solid foundation for the future work.