如果有不了解webpack的同学，可以自行到webpack官网学习基础的配置，这里我们主要一起学习常见的插件应用。

loader用于打包文件，plugins 用于解决一些其他任务，比如去注释等等。

语法：

plugins:[plugin1,plugin2,plugin3]

数组中的参数要求是插件对象的实例，即必须new，如下：

plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
]

1. HTML文件生成插件：html-webpack-plugin

产生背景：多入口时，当你的 index.html 引入多个js，如果这些生成的js名称构成有 [hash] ，那么每次打包后的文件名都是变化的。

作用：HtmlWebpackPlugin 在此可以用于自动重新生成一个index.html或依据模板生成，帮你把所有生产的js文件引入到html中，最终生成到output目录。

安装：

npm install --save-dev html-webpack-plugin

配置：

//引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
//配置
plugins: [
    new HtmlWebpackPlugin()
]

当然，如上是单个页面的配置，如果需要设置多个页面的配置，需要实例化多个HtmlWebpackPlugin对象，另外我们也可以对其进行参数配置：

const htmlWebPackConfig = {    
    title: 'Hello Webpack', // 配置模板title   
    template: '', // 模板来源html文件    
    filename: 'index.html', // 生成的模板文件名    
    favicon: '', // 指定页面的图标    
    hash: true, // 是否生成hash添加在引入文件地址的末尾 默认为true    
    inject: '', // 引入模板的注入位置 取值有（true/false/body/head）   
    minify: { // 对生成的html文件进行压缩，默认是false        
        collapseWhitespace: true, // 是否去除空格        
        removeAttributeQuotes: true, // 去掉属性引用        
        caseSensitive: false, // 是否大小写敏感        
        removeComments: true, // 去掉注释    
    },    
    cache: true, // 表示内容变化的时候生成一个新的文件， 默认true    
    showErrors: true, // 是否将错误信息写在页面， 默认true   
    chunks: ['index'], // 引入模块，指的是entry中设置的多个js,这里是执行js, 否则引入全部
};

注意：如上是为了方便表述，横向标写注释，请大家使用的时候使用严谨的json格式哦~

2. 图片压缩插件：imagemin-webpack-plugin

产生背景：图片过大，加载速度慢，浪费存储空间。

作用：批量压缩图片。

安装：

npm install --save-dev imagemin-webpack-plugin

配置：

//引入插件
var ImageminPlugin = require('imagemin-webpack-plugin').default;

//配置
plugins: [
    new ImageminPlugin({
      disable: process.env.NODE_ENV !== 'production', // 开发时不启用
      pngquant: {//图片质量
        quality: '95-100'
      }
    })
]

3. 清空文件夹插件：clean-webpack-plugin

产生背景：每次进行打包需要手动清空目标文件夹。

作用：每次打包时先清空output文件夹。

安装：

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

配置：

//引入
const CleanWebpackPlugin = require('clean-webpack-plugin');
//清空dist文件夹
plugins: [
  new CleanWebpackPlugin(['dist'])
]

4. 提供全局变量插件

产生背景：每次进行import引入全局模块，很麻烦。

作用：可以导入到全局，之后不用再在每个页面import。

无需安装：

内置插件: webpack.ProvidePlugin

配置：

//这些变量不必再import了
new webpack.ProvidePlugin({
    jQuery: 'jquery',
    React: 'react',
    ReactDOM: 'react-dom',
    Component: ['react','Component'] // 导出react模块中的Component
})

5. 公共代码抽取插件

产生背景：CommonsChunkPlugin 已弃用，使用optimization.splitChunks代替，像我们项目中会多次引用到一些公共模块，或者第三方类库，会进行重复打包。

作用：提取被重复引入的文件，单独生成一个或多个文件，这样避免在多入口重复打包文件。

安装：

无需安装，内置

配置：

optimization: {
    //打包 第三方库
    //打包 公共文件
    splitChunks: {
        cacheGroups: {
            vendor:{//node_modules内的依赖库
                chunks:"all",
                test: /[\\/]node_modules[\\/]/,
                name:"vendor",
                minChunks: 1, //被不同entry引用次数(import),1次的话没必要提取
                maxInitialRequests: 5,
                minSize: 0,
                priority:100,
                // enforce: true?
            },
            common: {// ‘src/js’ 下的js文件
                chunks:"all",
                test:/[\\/]src[\\/]js[\\/]/,//也可以值文件/[\\/]src[\\/]js[\\/].*\.js/,  
                name: "common", //生成文件名，依据output规则
                minChunks: 2,
                maxInitialRequests: 5,
                minSize: 0,
                priority:1
            }
        }
    }
}

配合 runtimeChunk 使用：

optimization.runtimeChunk 用来提取 entry chunk 中的 runtime部分函数，形成一个单独的文件，这部分文件不经常变换，方便做缓存。

runtimeChunk将入口提取出来，这样入口文件可以很快加载，并且当哪里有改动的时候，只有改动的地方和这个文件有变化。

配置：

runtimeChunk: {
  name: 'manifest'
}

6. css提取插件：mini-css-extract-plugin （生产模式）

产生背景：在进行打包时，css代码会打包到JS中，不利于文件缓存。

作用：依据每个entry生成单个css文件（将css从js中提取出来）。

安装：

npm install --save-dev mini-css-extract-plugin

配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins: [
  new MiniCssExtractPlugin(),
]

注意：

不要在开发模式使用，因为不支持热加载
如果单入口，不需要这个

7. css 去除无用的样式

产生背景：编写的css可能出现冗余情况。

作用：去除冗余的css代码。

安装：

npm install --save-dev purifycss-webpack

配置：

const purifycssWebpack = require('purifycss-webpack');
const glob = require('glob');

// Make sure this is after ExtractTextPlugin!
new purifycssWebpack({
　　paths: glob.sync(path.resolve('./src/*.html'))
}),

注意：html文件生成 > css提取 > css摇树

8. 文件复制插件：copy-webpack-plugin

产生背景：一些静态资源（图片、字体等），在编译时，需要拷贝到输出文件夹。

作用：用来复制文件或文件夹。

安装：

npm install --save-dev copy-webpack-plugin

配置：

// 引入
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyPlugin([
      { from: 'source', to: 'dist' },
      { from: 'other/xx.js', to: 'dist' },
    ]),
  ],
};

以上，是我比较常用的webpack插件，详细的例子，可以参见我的代码哦~

大前端，我们一起加油，感谢大家的观看！！！