webpack配置中使用的插件

一、html-webpack-plugin

简化了HTML文件的创建，以便为你的webpack包提供服务。不用我们自己生成html文件，插件自动帮我们生成

配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new HtmlWebpackPlugin({
    template: './src/index.html', // 以该html文件为模板，生成文件
    filename: 'index.html' // 产生后的文件名
  })
]

二、clean-webpack-plugin

打包生成文件夹之前，把原来的删除

配置

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
plugins: [
    new CleanWebpackPlugin()
]

三、mini-css-extract-plugin

将css样式分离出来

配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
rules: [
    {
    test: /\.css$/,
    // css-loader 用来解析处理css文件中的url路径
    // style-loader 可以把css文件变成style标签插入到header中
    // 多个loader是有顺序要求的，从右往左写，因为转换的时候是从右往左转换
    // loader: ['style-loader', 'css-loader']
    use: [
      //添加loader,用于生产模式，不能有 style-loader 
      {
        loader:MiniCssExtractPlugin.loader,
        options:{
          publicPath:'../'
        }
      },
      "css-loader"
    ]
  }
]
plugins: [
    new MiniCssExtractPlugin({
    filename: "css/[name].css",
    chunkFilename: "[id].css"
  })
]

四、optimize-css-assets-webpack-plugin

压缩css代码（去除空格和注释）

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
plugins: [
    new OptimizeCSSAssetsPlugin({})
]

五、uglifyjs-webpack-plugin

压缩js代码

const uglify = require('uglifyjs-webpack-plugin');
plugins: [
    new uglify()
]

六、webpack-parallel-uglify-plugin

并行压缩js代码

const ParalleUglifyPlugin = require('webpack-parallel-uglify-plugin');
plugins: [
    new ParalleUglifyPlugin({
    uglifyJs:{
      output: {
        beautify:false, // 最紧凑的输出
        comments:true, // 删除所有的注释
      },
      compress:{
        warnings: false, //在UglifyJs删除没有用到的代码时不输出警告
        drop_console:true, // 删除所有的 `console` 语句，可以兼容ie浏览器
        collapse_vars:true, // 内嵌定义了但是只用到一次的变量
        reduce_vars:true // 提取出出现多次但是没有定义成变量去引用的静态值
      }
    }
  })
]