plugins其实就是插件，它可以使我们的打包更加快捷，并且让webpack更加灵活。 :::info plugins可以在webpack运行到某个时刻的时候，帮我们做一些事情。
有点像vue的生命周期，每个plugin都有不同的运行时刻，例如HtmlWebpackPlugin是在打包结束后。
所以，我们在打包某些文件的时候，希望途中处理一些事情，可以使用pLugins ::: 这章里面提供两个插件说明

HtmlWebpackPlugin

概念：简化了HTML文件的创建，以便为你的webpack包提供服务。

什么意思？ 当我们打包的时候，有没有发现，dist里面的html是我们手动添加进去的。如果把html删掉，打包并不会出现html文件。HtmlWebpackPlugin插件可以帮助我们在打包的时候提供html

在讲例子前，我们谈谈它的具体作用 :::info HtmlWebpackPlugin插件会在打包结束后， 自动生成一个html文件， 并把打包生成的js自动引入到html中 :::

安装

npm install —save-dev html-webpack-plugin

例子

结构
image.png

  2. const path = require('path')
  3. const HtmlWebpackPlugin = require('html-webpack-plugin')
  5. module.exports = {
  6.   mode: 'development',
  7.   entry: {
  8.     main: './src/index.js'
  9.   },
  10.   module: {
  11.     rules:[
  12.       {
  13.         test: /\.(jpg|png|gif)$/,
  14.         use:{
  15.           loader: 'url-loader',
  16.           options: {
  17.             name:'[name]_[hash].[ext]',
  18.             outputPath: 'images/',
  19.             limit: 2048 // 2kb
  20.           }
  21.         }
  22.       },
  23.       {
  24.         test: /\.scss$/,
  25.         use:[
  26.           'style-loader', 
  27.           {
  28.             loader:'css-loader',
  29.             options: {
  30.               importLoaders: 2
  31.             }
  32.           },
  33.           'sass-loader',
  34.           'postcss-loader'
  35.         ]
  36.       }
  37.     ]
  38.   },
  39.   // 在这里创建一个plugins数组，实例化插件
  40.   plugins:[ new HtmlWebpackPlugin() ],
  41.   output: {
  42.     filename: 'bundle.js',
  43.     path: path.resolve(__dirname, 'dist')
  44.   }
  45. }

打包成功后发现，已经出现index.html
image.png
并且我们可以发现，这个script标签也自动引入了bundle.js。但是,我们的index.js文件里面是有获取index.html中的id为root的div，显然这个index.html没有。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script defer src="bundle.js"></script>
  </head>
  <body>
  </body>
</html>

var root = document.getElementById('root');
import './index.scss'

root.innerHTML = '<div class="iconfont iconxinheart118"></div>'

:::warning 原因很简单，不可能自动生成的html文件具备你想要的dom元素。所以我们还需要模板。 :::

修改配置

结构
image.png


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

module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  module: {
    rules:[
      {
        test: /\.(jpg|png|gif)$/,
        use:{
          loader: 'url-loader',
          options: {
            name:'[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 2048 // 2kb
          }
        }
      },
      {
        test: /\.scss$/,
        use:[
          'style-loader', 
          {
            loader:'css-loader',
            options: {
              importLoaders: 2
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  // 在这里创建一个plugins数组，实例化插件
  // 增加模板
  plugins:[new HtmlWebpackPlugin({
    template: 'src/index.html'
  })],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

<!DOCTYPE html>
<html lang="en">
<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">
  <title>模板</title>
</head>
<body>
  <div id = 'root'></div>
</body>
</html>

然后打包，我们可以发现dist中的index.html和我们src/index.html保持一致了，并且还引入了bundle.js文件
image.png

讲一下流程 1、当项目打包完成之后，他会生成一个html 2、它生成的这个html会根据template中的模板生成的 3、会把打包生成的bundle.js注入到html文件中

clean-webpack-plugin

我们在每次打包的时候，如果希望打包前先把dist目录删掉，然后再生成一个新的dist目录，可以使用这个插件

如果就这样说，会觉得没什么必要，因为在每次打包的时候，同名的文件是会被覆盖掉的。但是有一种情况，如果我们在output中的filename很有可能改动过，例如第一次是dist.js，然后打包生成了一个dist.js。第二次是bundle，然后生成了一个bundle.js，这样dist.js就没用了。但是即使没用，他也会一致保存在打包文件夹里。
所以可以通过这个插件来进行删除后再生成新的打包目录。

image.png

:::warning 这个插件并不是官方插件，是第三方的插件 :::

安装

npm install clean-webpack-plugin -D


const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  module: {
    rules:[
      {
        test: /\.(jpg|png|gif)$/,
        use:{
          loader: 'url-loader',
          options: {
            name:'[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 2048 // 2kb
          }
        }
      },
      {
        test: /\.scss$/,
        use:[
          'style-loader', 
          {
            loader:'css-loader',
            options: {
              importLoaders: 2
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  // 在这里创建一个plugins数组，实例化插件
  plugins:[new HtmlWebpackPlugin({
    template: 'src/index.html'
  }), new CleanWebpackPlugin()], // 意思是当我们在打包之前，我们会使用CleanWebpackPlugin帮助我们删除dist目录下的所有内容
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

image.png

打包的流程

  1. clean-webpack-plugin会在打包流程执行之前就先执行，帮助我们清理dist目录
  2. 然后才进入打包环节
  3. 当打包环节都结束之后，HtmlWebpackPlugin开始执行
  4. 然后它会生成一个index.html, 在index.html中，它也会把我们生成的js放到html中