Comprensión del complemento del paquete web

1. El papel de pulgín

• pulgin significa "complemento", el objetivo principal es resolver cosas que el cargador no puede lograr, el cargador solo se usa para convertir módulos específicos, y pulgin se puede usar para realizar una gama más amplia de tareas, como optimización de paquetes, recursos gestión, inyección de variables de entorno, etc.

• pulgin se ejecuta a través de todo el ciclo de compilación de webpack, ejecutándose en diferentes etapas de webpack (hook / ciclo de vida)

2. Método de configuración Pulgin

Por lo general, la configuración de pulgin se pasa en el nuevo objeto de instancia a través del atributo de complementos en el objeto de exportación del archivo de configuración webpack.config.js

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. La esencia de pulgín

pulgin es esencialmente un objeto javascript con un applymétodo , y su apply método será llamado por la fase del compilador del paquete web, y se puede acceder al objeto del compilador durante todo el ciclo de vida de la compilación

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

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

module.exports = ConsoleLogOnBuildWebpackPlugin;
复制代码

Con respecto a los ganchos del ciclo de vida completo de la compilación:

• opción de entrada: opción de inicialización
• correr
• compilar: la compilación que realmente comienza, antes de que se cree el objeto de compilación
• compilation : se genera el objeto de compilación
• hacer análisis recursivos de dependencias desde la entrada, listos para construir cada módulo
• after-compile: finaliza el proceso de compilación y construcción
• emit : antes de escribir el contenido de los activos en memoria en la carpeta del disco
• after-emit : después de escribir el contenido de los activos en memoria en la carpeta del disco
• hecho: completar todo el proceso de compilación
• fallido: cuando la compilación falla

Cuatro, pulgón común

4-1 html-webpack-complemento

efecto:

1. Use el complemento HtmlWebpackPlugin para generar automáticamente archivos html e importar los archivos js empaquetados
2. El principio de HtmlWebpackPlugin es generar la plantilla ejs predeterminada. Por supuesto, también puede personalizar la plantilla. En la plantilla html, puede  <%=htmlWebpackPlugin.options.XXX%> obtener el valor de configuración al

// 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-complemento

Función: cada vez que empaca, el complemento CleanWebpackPlugin eliminará automáticamente el último paquete

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

4-3 mini-css-extraer-complemento

Qué hace: Extrae CSS en un archivo separado

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 Definir complemento

Función: DefinePlugin permite la creación de constantes globales para la configuración en tiempo de compilación. Es un complemento integrado de webpack (no es necesario instalarlo por separado)

const { DefinePlugun } = require('webpack')

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

En este momento, cuando se compila el módulo template, el objeto global se puede obtener de la siguiente forma

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

4-5 copia-webpack-plugin

Función: CopyWebpackPlugin es un complemento para copiar archivos, copiar archivos o directorios en un área específica, como en el proceso de empaquetado de vue, si colocamos algunos archivos en el directorio público, este directorio se copiará en la carpeta dist

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的生成
                }
            ]
        })
复制代码