“This is the 15th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

We have talked about the js, CSS, img and font files package in the project, these are the most commonly used resources in development (of course, for the Vue project, and the use of.vue files, how to package it? We will use the corresponding loader and a plugin to package it, which will be discussed later. React also uses.jsx files, which are used in special scenarios. The packaging configuration for these types of files is also the most basic use of Webpack.

Before we start this section, let’s do a few things to prepare:

  1. Delete build and node_modules folders from webPack_ resources.

  2. Make a copy of the WebPack_ resource directory and rename it webPack_ plug-ins.

  3. Open VS Code terminal, switch directory to webPack_ plug-in, and run NPM install to install the dependencies required by the current project (webPack_ plug-in). After installation, the project directory is as follows:

Currently, there are two major shortcomings in our project:

  1. Each time before packing, you need to manually delete the folder that you packed last time (we are here./build), each manual deletion is a bit troublesome;
  2. The key was missing from the packaged folderindex.htmlFile (as we said, static resources need one.htmlFiles are used as entry files, although they are in the project directoryindex.htmlFiles, but these files in the project directory are usually extra configurations and we don’t deploy them, we only deploy packaged folders);

Let’s start with the first question. We now need to delete everything we’ve packed before we pack it, so what if we want it to delete automatically? You may be wondering if there is a loader to help us implement it. If you want to load a module, you need to use the corresponding loader. If you want to load a module, you want to delete a folder in the project at a certain point (i.e. before packaging), which is not related to loader. This is where the plugin comes in. What are plug-ins for? Simply put, anything that loader can’t do and you want to do at some point in the Webpack can be done using plug-ins. Plug-ins are very powerful throughout the entire life cycle of WebPack, not only used when loading modules, but also in many other places, including loading entry, exit configuration are essentially converted into plug-ins for use (all of which can be seen through the source of WebPack).

Therefore, another core of Webpack is the Plugin, which is described in the official documentation 1:

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

The meaning expressed above is translated as:

  • Loaders is used to convert specific module types;

  • Plugins can be used to perform a wider range of tasks, such as packaging optimization, resource management, environment variable injection, and so on.

1. CleanWebpackPlugin

We need to manually delete the folder we built last time when we repackage the configuration. In fact, we can use a plug-in to help us to accomplish this operation, the plug-in is the CleanWebpackPlugin. By default, this plug-in will remove all files in the directory corresponding to output.path in the WebPack configuration, as well as any WebPack resources that are not used after each successful rebuild.

First, let’s install this plugin:

npm install --save-dev clean-webpack-plugin
Copy the code

Then configure it in the plugins option in the webpack.config.js file:

.// Unlike loader, plug-ins must be imported manually
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  ...
  plugins: [
    new CleanWebpackPlugin()
  ]
}
Copy the code

Because this plug-in exports an object containing a class named CleanWebpackPlugin, we need to get the class in this object when importing. (Normally, the plug-in will encapsulate a class, and then the hook will callback to execute the code in the plug-in. That’s where custom plug-ins and source code come in, but a plug-in usually provides a class (or, of course, a function) that you can use to create objects. Plugins are written in plugins, which correspond to an array of plugins that need to be placed one by one (in fact, in webpack source code, it is necessary to take the exported object and then take the plugins inside. The injection is then done through a for loop, which calls a method of the object in the plug-in back and forth depending on the lifecycle of the different hooks.

After the configuration is complete, you can comment out the plugins to see the effect of the configuration. Then you can package the build folder (package the output directory) and create a new ABC. TXT file in the build folder. The abc.txt file is still there. Now let’s uncomment the plugins configuration, use the plugin and then package it, and you’ll see that this time the abc.txt file is deleted. Because the plugin will delete the files in the folder of the package output first, and then regenerate the new package file.

  1. See webpack.js.org/concepts/#p… ↩