1_ Know the Plug-in Plugin

Another core of Webpack is Plugin. The official description of Plugin is as follows:

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 translation of the above expression is:

Loader is used for conversion of specific module types;
Plugin can be used to perform a wider range of tasks, such as packaging optimization, resource management, environment variable injection, etc.;

2_CleanWebpackPlugin

In the process of the previous demonstration, every time some configurations are modified and repackaged, the dist folder needs to be deleted manually, which can be done with the help of a plug-in. This plug-in is CleanWebpackPlugin;

First, install this plugin:

npm install clean-webpack-plugin -D

Then configure in webpack.config.js:

const {
    
     CleanWebpackPlugin } = require("clean-webpack-plugin")

module.exports = {
    
    
 //其余代码省略
 plugins: [
    new CleanWebpackPlugin()
  ]
}

3_HtmlWebpackPlugin

There is also a non-standard place:

HTML files are written in the root directory, and there is no index.html file in the final packaged dist folder.
When deploying a project, it is necessary to have a corresponding entry file index.html;
So it is also necessary to package index.html;

To package HTML, you can use another plug-in: HtmlWebpackPlugin;

npm install html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    
    
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

Generate index.html analysis

Now in the dist folder, an index.html file is automatically generated, and the packaged bundle.js file is also automatically added to the file;
how is the file generated?

By default, it is generated according to a template of ejs;
In the source code of html-webpack-plugin, there is a default_index.ejs module;

The generated index.html content is the default template, and you can also generate your own desired template

Custom HTML Template

If you want to add something special to your module:

For example, add a noscript tag to give a response prompt when the user's JavaScript is turned off;
For example, when developing a vue or react project, a root tag that can mount subsequent components is required <div id="app"></div>;

This requires an index.html module of its own, such as the following template

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Custom Template Data Population

In the above code, there will be some syntax like this <% variable %>, this is how the EJS module fills the data.

When configuring HtmlWebpackPlugin, you can add the following configuration:

template: Specify the path where the module to be used is located;
title: This information will be read when reading htmlWebpackPlugin.options.title;

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    
    
  plugins: [
    new HtmlWebpackPlugin({
    
    
      title: "项目名称",
      template: "./index.html"
    })
  ]
}

4_DefinePlugin

4.1_ Introduction

However, an error will still be reported when compiling at this time, because a constant BASE_URL is also used in the custom module. The error is as follows

ERROR in Template execution failed: ReferenceError:BASE_URL is not defined
ERROR in ReferenceError: BASE_URL is not defined

This is because when compiling the template module, there is a BASE_URL: <link rel="icon" href="<%= BASE_URL %>favicon.ico">, but this constant value has not been set, so there will be an undefined error;

At this time, you can use the DefinePlugin plug-in;

4.2 Use of _DefinePlugin

DefinePlugin allows the creation of global constants configured at compile time, and is a built-in webpack plugin (no separate installation required):

const {
    
     DefinePlugin } = require("webpack")

module.exports = {
    
    
  plugins: [
    new DefinePlugin({
    
    
      BASE_URL: "'./'",
      coder: "'xxx'", 	//当成一个全局变量，根据实际情况决定是否添加
      counter: "123"	 //当成一个全局变量
    })
  ]
}

At this time, compiling the template can be compiled correctly, and the value of BASE_URL will be read;

5_Mode mode

The Mode configuration option can tell webpack to use the built-in optimization of the corresponding mode:

The default value is production (when nothing is set);
Possible values are: 'none' | 'development' | 'production';

The difference between these options?

insert image description here

Know Webpack plugin Plugin; CleanWebpackPlugin plugin; HtmlWebpackPlugin; DefinePlugin; Mode mode

Table of contents