“Offer comes, ask friends to take it! I am participating in the 2022 Spring Recruit Punch card campaign. Click here for more details.”

What is Webpack

Webpack is a static module packaging tool for modern JavaScript applications.

We can call it a baler.

Why do we need WebPack? We know that many of the new ES features we are learning now (including ES6 after ES6) are not directly recognized by the browser, and our CSS precompiled, such as SCSS, LESS, etc., as well as our VUE pages, TS files, these are not recognized by the browser. So in order for the browser to parse these files correctly, WebPack was born to help us translate the code into the code that the browser recognizes.

The core concept of Webpack

2.1 entry entry

The entry point indicates which module WebPack should use as a starting point for building its internal dependencies.

2.2 export output

Output tells WebPack where to export the bundles it creates, and how to name those files

2.3 loader

Loader enables WebPack to process other types of files and convert them into valid modules

2.4 the plugin

Loaders are used to transform certain types of modules, while plug-in plugins can be used to perform a wider range of tasks

2.5 pattern mode

It is usually configured as one of development, production, or None, where development is the development environment and production is the production environment, which is the formal environment

Webpack configuration

Here, we will configure a webpack environment. First we will create a folder and open it with VScode

Open the terminal and initialize the project. The -y ritual is initialized according to the default configuration

After initialization we see a package.json file

Then install the WebPack-related dependencies

After installation, we can see that the additional devDependencies in package.json already have the dependencies we need

Then we create a new webpack.config.js file to do the configuration. Create a new SRC folder and create an index.js file as our entry file

First we configure the mode and entry,

We can pack it and see what it looks like using the NPX webpack command

As you can see, a new dist folder has been added after the package. By default, there is a main.js file underneath. We can rename the output file. Configure as follows and repackage. We found that we already had the index.js we wanted under dist

Above is the js file we packaged, we can also package the HTML file, first we need to install a dependency to help us implement

It is then introduced and configured in webpack.config.js

Repackage and you can see that there is an index.html under dist

We can also package it according to the specified file template and create a new file named index.html under SRC

This is then configured in webpack.config.js

Note: the html-webpack-plugin package may report the following error, because the version is too high, we can install 4. Many versions

4. Configuration optimization

The above configuration knowledge is some basic configuration, when the project becomes complex, we also need to optimize the webpack configuration, we provide an idea, is to split webpack.config.js according to the environment purpose, split into the following:

Copy the previous configuration to webpack.base.config.js as the base configuration

Then configure webpack.dev.config.js. The effect of this configuration is equivalent to using the Cheap pattern in a development environment, greatly increasing the efficiency of sourceMap generation.

Next to configure the production environment, we need to install a dependency that will be removed every time the last burst file is packed

Then we need to use these configurations in the general configuration, and we need to introduce a plug-in to merge the configurations.

We then merge the relevant files in webpack.config.js according to the environment

At this point we can remove our original webpack.config.js and also remove the mode we wrote earlier.

Configuration of Babel

Babel can convert our ES6+ code into ES5 code, we need to install the dependencies first

Then we configure

conclusion

We completed the basic configuration of WebPack with such a small example. In fact, Webpack is more powerful than that, he can also solve a lot of problems, interested partners can explore it.

And finally, if you think you’ve learned something, please give it a thumbs up. Much appreciated.