webpack Plugin understanding

1. The role of pulgin

• pulgin means "plug-in", the main purpose is to solve things that loader can't achieve, loader is only used to convert specific modules, and pulgin can be used to perform a wider range of tasks, such as packaging optimization, resource management, environment variables injection etc.

• pulgin runs through the entire compilation cycle of webpack, running in different stages of webpack (hook / life cycle)

2. Pulgin configuration method

Usually, the configuration of pulgin is to pass in the new instance object through the plugins attribute in the export object of the webpack.config.js configuration file

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 访问内置的插件
module.exports = {
  ...
  // 配置 plugins
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};
复制代码

3. The essence of pulgin

pulgin is essentially a javascript object with a applymethod , and his apply method will be called by the webpack compiler phase, and the compiler object can be accessed throughout the compilation life cycle

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, (compilation) => {
      console.log('webpack 构建过程开始！');
    });
  }
}

module.exports = ConsoleLogOnBuildWebpackPlugin;
复制代码

Regarding the entire compilation lifecycle hooks:

• entry-option : initialization option
• run
• compile: The compilation that actually starts, before the compilation object is created
• compilation : the compilation object is generated
• make recursively analyzes dependencies from entry, ready to build each module
• after-compile: Compilation and build process ends
• emit : before writing the contents of in-memory assets to the disk folder
• after-emit : After writing the contents of in-memory assets to the disk folder
• done: complete all compilation process
• failed: when the compilation fails

Four, common pulgin

4-1 html-webpack-plugin

effect:

1. Use the HtmlWebpackPlugin plugin to automatically generate html files, and import the packaged js files
2. The principle of HtmlWebpackPlugin is to generate the default ejs template. Of course, you can also customize the template. In the html template, you can  <%=htmlWebpackPlugin.options.XXX%> get the configuration value by

// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
 ...
  plugins: [
     new HtmlWebpackPlugin({
            title: "webpack案例",
            template: "./public/index.html", // 指定生成的 html 模版
        }),
  ]
};
复制代码

4-2 clean-webpack-plugin

Function: Every time you pack, the CleanWebpackPlugin plugin will automatically delete the last pack

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
 ...
  plugins: [
    new CleanWebpackPlugin()
  ]
}
复制代码

4-3 mini-css-extract-plugin

What it does: Extract CSS into a separate file

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
 ...,
  module: {
   rules: [
    {
     test: /.s[ac]ss$/,
     use: [
      {
       loader: MiniCssExtractPlugin.loader
     },
          'css-loader',
          'sass-loader'
        ]
   }
   ]
 },
  plugins: [
    ...,
    new MiniCssExtractPlugin({
     filename: '[name].css'
    }),
    ...
  ]
}
复制代码

4-4 DefinePlugin

Role: DefinePlugin allows global constants to be created at compile time. It is a built-in plugin of webpack (does not need to be installed separately)

const { DefinePlugun } = require('webpack')

module.exports = {
 ...
    plugins:[
        new DefinePlugin({
            BASE_URL: '"./"' // 等价于 const BASE_URL = "./" 他的赋值方式有点奇葩
        }),
    ]
}
复制代码

At this time, when the module is compiled template, the global object can be obtained in the following form

  <!-- BASE_URL 是一个全局的常量，是通过 DefinePlugin 这个插件去定义的 -->
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
复制代码

4-5 copy-webpack-plugin

Function: CopyWebpackPlugin is a plugin for copying files, copying files or directories to a specified area, such as in the packaging process of vue, if we put some files in the public directory, then this directory will be copied to the dist folder

new CopyWebpackPlugin({
            // 通过 CopyWebpackPlugin 插件将 public 中的文件复制到打包后的文件夹下
            // patterns 是匹配的意思
            patterns: [
                {
                    from: "public", // 设置从哪一个源中开始复制
                    to: "build" // 可以省略，默认是复制到打包输出的路径，会根据 output 
                    globOptions: {
                        ignore: ['**/DS_Store', '**/index.html', '**/abc.txt'] // ** 表示的是 from 的文件夹
                    }
                    // globOptions：设置一些额外的选项，其中可以编写需要忽略的文件,
                    //比如.DS_Store：mac目录下回自动生成的一个文件；.index.html：也不需要复制，因为我们已经通过HtmlWebpackPlugin完成了index.html的生成
                }
            ]
        })
复制代码