在webpack中，loader用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化、资源管理、注入环境变量。

想要使用一个插件，首先要 <span style="background: yellow"> require </span>它，然后把它添加到<span style="background: yellow"> plugins </span>数组中。多数插件可以通过选项（option）自定义。

环境

主要配置

webpack : v4.26.0

webpack-cli： v3.1.2

"devDependencies": {
    "autoprefixer": "^9.3.1",
    "clean-webpack-plugin": "^1.0.0",
    "css-loader": "^1.0.1",
    "cssnano": "^4.1.10",
    "file-loader": "^4.0.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.14.1",
    "postcss-loader": "^2.0.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^4.1.1",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2"
  },

一、html-webpack-plugin

HtmlWebpackPlugin 简化了HTML文件的创建，以便为webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的webpack bundle 尤其有用（不用每次都手动的去移动主题HTML以及每次都更改引入的资源名称【js等】），我们可以让插件为我们生成一个HTML文件。

安装

npm install html-webpack-plugin -D

基本效果

    该插件会自动生成一个HTML5文件，其中包括使用 `script` 标签的 body 中的所有 webpack 包。

基本使用配置

在webpack.config.js 中，plugins属性接受一个数组，我们可以把各个插件写入数组当中。

// webpack.config.js
plugins: [
  new HtmlWebpackPlugin({
    title: '测试title属性', 
    filename: 'zhv.html', 
    template: 'src/index.html',
    chunks: ['index'], 
    })
]

配置解析（options）

excludeChunks：arry, 和chunks相反，排除掉某些js文件。

inject: boolean或string， 注入选项。 true, body, head, false。 true 和 body是把js插入到body的底部，head是把js放到head中。false，只是生成html文件，不引入js。默认为true。

favicon: string, 给生成文件生成一个favicon，属性值为favicon文件所在的路径名。

minify: boolean或object， 设置静态资源压缩情况。 如果mode 设置为 production默认为true, 否则为false。

hash：boolean, 默认为false。

cathe: boolean，设置js、css文件的缓存，当文件没有发生变化时，是否设置使用缓存。默认为true

shoErrors： boolean， 当文件发生错误时，是否将错误显示在页面上。

二、clean-webpack-plugin

我们每次打包的时候，总是先手动删除dist文件夹来确保结果为最新状态。可能有些人并没有这个困扰，可能是因为并没有在filename属性上加入hash值，这个时候我们就需要用到clean-webpack-plugin。

安装

npm install clean-webpack-plugin --save-dev

基本效果

clean-webpack-plugin是用来在每次编译时删除之前所构建出来的文件，接着才生成编译结果。

基本使用配置

低版本需要指定文件夹名称

// webpack.config.js
const CleanWebpackPlugin = require('clean-webpack-plugin')
plugins: [
    new CleanWebpackPlugin(['dist']),
]

高版本直接声明一下即可。

// webpack.config.js
const CleanWebpackPlugin = require('clean-webpack-plugin')
plugins: [
    new CleanWebpackPlugin()
]

比较有用的参数

verbose: Boolean ， 是否将日志写入控制台， 默认为 false

// webpack.config.js
const CleanWebpackPlugin = require('clean-webpack-plugin')
plugins: [
    new CleanWebpackPlugin({
        verbose: true
    })
]

cleanOnceBeforeBuildPatterns： 可传递选项指定并删除目录下的所有档案。

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['**/*'], // 预设值 (相对于 output.path 指定目录下)
    }),
  ],
};

假如我们想在删除的范围内保留特定档案，例如我们想删除 output.path上一层目录下的所有的.json 文件，但是想保留 package.json和 package-lock.json，我们可以使用 !排除文件。

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [
        '**/*',
        path.resolve(__dirname, '*.json'),
        `!${path.resolve(__dirname, 'package*')}`,
      ],
    }),
  ],
};