webpack打包前清空上次打包内容。

常用plugin

webpack-merge

合并两个配置文件，他是webpack插件，引入webpack模块即可使用；应用场景：区分开发环境/生产环境

const webpack = require('webpack');
module.exports = merge(base, {
  // 一些配置
}

CleanWebpackPlugin

打包前清空上次打包内容。

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

html-webpack-plugin

简单创建 HTML 文件

const HtmlWebpackPlugin = require('html-webpack-plugin')
  plugins: [
    new HtmlWebpackPlugin({ // 打包输出HTML
      title: 'Hello World app',
      minify: { // 压缩HTML文件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true// 压缩内联css
      },
      filename: 'index.html',
      template: 'index.html'
    }),
  ]

mini-css-extract-plugin

可以把样式抽离成一个css文件

// 先安装然后引入，import和require都是可以的
// import './index.css'
require('./index.css')
// 这个插件要同时使用他的loader和plugin才行
plugins:[
  new MiniCssExtractPlugin({
    filename: 'css/main.css'
  }),
],
 module: {
   rules: [
      {
        test: /\.css$/,
        loader: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
 }

uglifyJsPlugin

JS压缩插件, webpack4默认是生产环境，自带js压缩功能

OptimizeCssAssetsPlugin

css代码压缩

new OptimizeCssAssetsPlugin({
   assetNameRegExp:/\.css$/g,
   cssProcessor:require("cssnano"),
   cssProcessorPluginOptions:{
     preset:['default',{discardComments:{removeAll:true}}]
   },
   canPrint:true
 })

HotModuleReplacementPlugin

热更新插件，他是一个webpack自带插件

new webpack.HotModuleReplacementPlugin()
// 模块属性
devServer：{
    hot:true
}

DefinePlugin

定义环境变量插件,是一个webpack自带插件

new webpack.DefinePlugin({
      DEV: JSON.stringify('dev')
    }),