plugin知的少

extract-text-webpack-plugin:抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象

内置plugin:

1、UglifyJsplugin:压缩和混淆代码

2、CommonsChunkPlugin: 提高打包效率，将第三方库和业务代码分开打包

3、ProvidePlugin:使用时不再需要require和import，可直接使用，如：

new webpack.ProvidePlugin({

$: 'jquery'

})

4、DefinePlugin:可以定义全局变量

new webpack.DefinePlugin({
      OBJ: JSON.stringify({"key1": "this is value"}), //  OBJ= { key1: 'this is value' }
      // OBJ2: {"key1": "this is value"},//报错  console.log('OBJ2=', Object({"key1":this is value}));
      OBJ3: {"key1": "'this is value'"},// OBJ3= { key1: 'this is value' }
      ARRAY:  JSON.stringify(["value1", "value2"]),// ARRAY= [ 'value1', 'value2' ]
      // ARRAY2: ["value1", "value2"], //报错 value1 is not defined
      ARRAY3: ["'value1'", "'value2'"],// ARRAY3= { '0': 'value1', '1': 'value2' }
      NUMBER: 12,
      BOOL: true,
      ali: 12
    })

DefinePlugin实际用于处理开发环境和生产环境的不同
比如一些 debug 的功能在生产环境中需要关闭、开发环境中和生产环境中 api 地址的不同

/*webpack.dev.config.js*/
var config = require('../config')
new webpack.DefinePlugin({
  'process.env': config.dev.env
})

/*webpack.prod.config.js*/
var config = require('../config')
new webpack.DefinePlugin({
  'process.env': config.prod.env
})

/* index.js*/
if ('development' === process.env.NODE_ENV) {
 // 开发环境下的逻辑
} else {
 // 生产环境下
}

html-webpack-plugin:根据模板自动生成html文件，并自动引入css和js

extract-text-webpack-plugin:把js文件中引用的样式单独抽离成css文件

clean-webpack-plugin:打包开始前清空打包目录

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

参考文章：
【webpack之loader和plugin简介】（https://zhuanlan.zhihu.com/p/28245984）
【webpack.DefinePlugin使用介绍】（https://blog.csdn.net/qq_34035425/article/details/98630652）