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 multi-page applications

In development, we sometimes encounter multiple page packaging, so how to configure multiple page packaging?

Suppose we now have two pages that correspond to two js, one called index.js and the other named list.js.

First, the entry configuration needs to be changed:

Then modify the htmlWebpackPlugin:

This generates two HTML files, each using the template index.html, with the first HTML called index.html and chunks representing the JS files that need to be introduced, which are runtimes. Js, vendors. Js, and main.js respectively. The other list. HTML, then, introduces jS as runtime.js, vendors.

If you need to add another page, you can add another HtmlWebpackPlugin and configure it accordingly.

Is there a way to add a page without copy-pasting?

Let’s set the module.exports output object to a variable

const configs = { // ... Module.exports = configsCopy the code

Then create a function

Get several entry files, different entry files to create the corresponding HTML file, the introduction of the corresponding JS.

You then put the plugins into configs.

configs.plugins = makePlugins(configs);
Copy the code

In this way, if you need to add pages, just need to add JS, there is no need to manually add configuration.