A introdução de plugins no webpack e os casos de uso de alguns plugins

Artigo Diretório

1. Conheça o plugin

plugin O que é isso?

Plugin significa plug-in, geralmente usado para estender uma arquitetura existente.
Os plug-ins no webpack são várias extensões para as funções existentes do webpack, como otimização de empacotamento, compactação de arquivo e assim por diante.

A diferença entre carregador e plugin

Loader é usado principalmente para converter certos tipos de módulos, é um conversor. Para a introdução do loader, verifique este blog: loader in webpack
Plugin é um plug-in, é uma extensão do próprio webpack, é um expansor.

O processo do plugin:

Etapa 1: instale o plug-in que precisa ser usado por meio do npm (alguns plug-ins já integrados do webpack não precisam ser instalados)
Etapa dois: Em webpack.config.js, o pluginsplug de configuração

O código é demonstrado abaixo. A versão do webpack que uso é 3.6.0. O
código demo tem um link para download na parte inferior da página para aprendizado.

Estrutura do diretório de código:
Insira a descrição da imagem aqui

2. Casos de uso de plug-ins

2.1 Plugin BannerPlugin

BannerPlugin É um plug-in que vem com o webpack e pode adicionar uma declaração de copyright ao arquivo empacotado.

Configure em webpack.config.js, plugins é um array, apenas um novo plugin.

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

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

Empacote o programa, veja o cabeçalho do arquivo gerado pelo pacote:
Insira a descrição da imagem aqui

2.2 plugin html-webpack-plugin

Atualmente, nosso arquivo index.html está armazenado no diretório raiz do projeto.

Sabemos que, quando o projeto é realmente lançado, o conteúdo da pasta dist é lançado, mas se não houver nenhum arquivo index.html na pasta dist, os js e outros arquivos empacotados não terão sentido.
Então, precisamos empacotar o arquivo index.html para a pasta dist, desta vez você pode usar html-webpack-pluginplug-ins

html-webpack-plugin Os plug-ins podem fazer estas coisas por nós:

Um arquivo index.html é gerado automaticamente na pasta dist (você pode especificar o modelo com antecedência para gerar)
O arquivo js empacotado é inserido automaticamente no corpo do arquivo index.html gerado por meio da tag de script

instalação:npm install html-webpack-plugin --save-dev

O método de instalação acima instala a versão mais recente, que não corresponde à minha versão 3.6.0 do webpack, e o pacote reportará um erro, então eu uso a versão 3.2.0 deste plugin. Como instalar a versão especificada:npm install [email protected] --save-dev

Configuração:

//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' 
      })
  ]
}

O arquivo de template index.html é assim, há apenas um div cujo id é app

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

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

</body>
</html>

O arquivo index.html final gerado pela embalagem:

<!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>

Insira a descrição da imagem aqui
Vemos que este plug-in insere automaticamente o arquivo js empacotado no arquivo index.html por meio da tag de script, e o caminho src também está correto.

Nota : Se configuramos em webpack.config.js em publicPath, use este plugin quando publicPath deve ser removido, caso contrário, as tags de inserção do caminho src do script serão mais um dist/prefixo. Como o arquivo index.html gerado originalmente encontrará o arquivo js na pasta dist, se o caminho src tiver um prefixo dist /, ele será encontrado na pasta dist na pasta dist, é claro que não pode ser encontrado. como mostra a imagem:
Insira a descrição da imagem aqui

// 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 plugin uglifyjs-webpack-plugin

Antes de o projeto ser lançado, devemos compactar o js e outros arquivos, aqui vamos compactar os arquivos js empacotados.

instalação: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()
  ]
}

Reempacotar, o arquivo js gerado é compactado

3. Informação

webpack 中文网 | Plugins

Link de download do código de demonstração https://webchang.lanzous.com/ilCrEkgqg4h Senha: 18xb