La introducción de complementos en el paquete web y los casos de uso de algunos complementos

Directorio de artículos

1. Conoce el complemento

plugin ¿Qué es?

Complemento significa complemento, generalmente utilizado para ampliar una arquitectura existente.
Los complementos en el paquete web son varias extensiones de las funciones existentes del paquete web, como la optimización del empaquetado, la compresión de archivos, etc.

La diferencia entre cargador y complemento

Loader se utiliza principalmente para convertir ciertos tipos de módulos, es un conversor. Para la introducción de loader, consulte este blog: loader in webpack
El complemento es un complemento, es una extensión del propio paquete web, es un expansor.

El proceso del complemento:

Paso 1: instale el complemento que debe usarse a través de npm (algunos complementos de webpack ya integrados no necesitan ser instalados)
Paso dos: en webpack.config.js, el pluginscomplemento de configuración

El código se muestra a continuación. La versión del paquete web que utilizo es 3.6.0. El
código de demostración tiene un enlace de descarga en la parte inferior de la página para aprender.

Estructura de directorio de código:
Inserte la descripción de la imagen aquí

2. Casos de uso de complementos

2.1 Complemento BannerPlugin

BannerPlugin Es un complemento que viene con el paquete web y puede agregar una declaración de derechos de autor al archivo empaquetado.

Configure en webpack.config.js, los complementos son una matriz, solo un nuevo complemento.

//webpack.config.js
let webpack = require('webpack');

module.exports = {
    
    
  // ... 其它配置
  plugins:[
      new webpack.BannerPlugin('最终版权归webchang所有')
  ]
}

Empaquete el programa, vea el encabezado del archivo generado por el paquete:
Inserte la descripción de la imagen aquí

2.2 complemento html-webpack-plugin

Actualmente, nuestro archivo index.html se almacena en el directorio raíz del proyecto.

Sabemos que cuando el proyecto se publica, el contenido de la carpeta dist se publica, pero si no hay un archivo index.html en la carpeta dist, los archivos js y otros archivos empaquetados no tienen sentido.
Por lo tanto, necesitamos empaquetar el archivo index.html en la carpeta dist, esta vez puede usar html-webpack-plugincomplementos

html-webpack-plugin Los complementos pueden hacer estas cosas por nosotros:

Un archivo index.html se genera automáticamente en la carpeta dist (puede especificar la plantilla de antemano para generar)
El archivo js empaquetado se inserta automáticamente en el cuerpo del archivo index.html generado a través de la etiqueta de script

instalación:npm install html-webpack-plugin --save-dev

El método de instalación anterior instala la última versión, que no coincide con mi versión 3.6.0 del paquete web, y el paquete informará un error, por lo que utilizo la versión 3.2.0 de este complemento. Cómo instalar la versión especificada:npm install [email protected] --save-dev

Configuración:

//webpack.config.js
let webpack = require('webpack');
let HTMLWebpackPlugin = require('html-webpack-plugin'); //1.引入

module.exports = {
    
    
  // ... 其它配置
  plugins:[
      new webpack.BannerPlugin('最终版权归webchang所有'),
      new HTMLWebpackPlugin({
    
     //2.使用
      	//这里的template表示根据什么模板来生成index.html
      	//会在当前配置文件所在目录下寻找index.html文件作为模板
        template:'index.html' 
      })
  ]
}

El archivo de plantilla index.html es así, solo hay un div cuya identificación es app

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测试</title>
</head>
<body>

<div id="app"></div>

</body>
</html>

El archivo index.html final generado por el empaquetado:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测试</title>
</head>
<body>

<div id="app"></div>

<script type="text/javascript" src="bundle.js"></script>
</body>
</html>

Inserte la descripción de la imagen aquí
Vemos que este complemento inserta automáticamente el archivo js empaquetado en el archivo index.html a través de la etiqueta del script, y la ruta src también es correcta.

Nota : Si configuramos en webpack.config.js en publicPath, use este complemento cuando publicPath deba eliminarse; de lo contrario, las etiquetas de inserción de ruta de script src serán más bien un dist/prefijo. Debido a que el archivo index.html generado originalmente encontrará el archivo js en la carpeta dist, si la ruta src tiene un prefijo dist /, se encontrará en la carpeta dist debajo de la carpeta dist, por supuesto que no se puede encontrar. como muestra la imagen:
Inserte la descripción de la imagen aquí

// webpack.config.js
// ...其它配置

module.exports = {
    
    
  entry: './src/main.js',              //打包入口
  output: {
    
                                //出口
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    // publicPath属性的目的是在url前加上一个dist/路径，使用这个插件的时候，把它去掉，不然可能会有问题
    // publicPath: "dist/"             
  }
  // ...其它配置
}

2.3 complemento uglifyjs-webpack-plugin

Antes de que se publique el proyecto, debemos comprimir js y otros archivos. Aquí, comprimiremos los archivos js empaquetados.

instalación:npm install [email protected] --save-dev

//webpack.config.js
let webpack = require('webpack');
let HTMLWebpackPlugin = require('html-webpack-plugin'); 
let UglifyWebpackPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    
    
  // ... 其它配置
  plugins:[
      new webpack.BannerPlugin('最终版权归webchang所有'),
      new HTMLWebpackPlugin({
    
    
        template:'index.html' 
      }),
      new UglifyWebpackPlugin()
  ]
}

Vuelva a empaquetar, el archivo js generado está comprimido

3. Información

webpack 中文网 | Complementos

Enlace de descarga del código de demostración https://webchang.lanzous.com/ilCrEkgqg4h Contraseña: 18xb