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. Package analysis

According to the official documentation, we can use the command line configuration webpack –profile –json > stats.json to generate a description of the packaging process into stats.json.

Then pack it once. Json file is a description of the packaging process. If we look at the description file to analyze the packaging process will be more difficult, so we need to use some tools to analyze.

Enter http://webpack.github.com/analyse, upload just generate a json file.

The information in the graph appears, showing webpack version 4.30.0, packaging time 20702 ms, hash value, and 46 modules referenced, 2 chunks generated, 5 static files generated, no warnings or exceptions.

You can also see the relationships between packages by clicking Modules.

In addition to this tool, several other tools are provided in the documentation.

If you need to use it, you can look at the corresponding documentation and use it.

2. Preloading, Prefetching

Here’s a look at Google’s Browser Coverage tool

We can see the usage of js on our page from this tool, and we can increase the usage of JS using asynchronous import, so Webpack recommends that we use asynchronous import, which is why the default value of splitchunks. chunks is “async”.

However, there may also be problems when introducing code asynchronously. For example, when a user clicks a button, the login box pops up, and we load js of the login box after the click, which may slow down the response of the click behavior. Then how to solve this problem?

Use the magic comment /* webpackPrefetch: true */ so that when the main JS is loaded and the bandwidth is free, the js that need to be imported will be downloaded automatically.

You can also write /* webpackPreload: true */. The difference is that webpackPrefetch will wait until the main service file is loaded and the bandwidth is free before downloading JS. Preload is loaded with the main service file.