extract-text-webpack-plugin:抽離css樣式,防止將樣式打包在js中引起頁面樣式加載錯(cuò)亂的現(xiàn)象
內(nèi)置plugin:
1睦刃、UglifyJsplugin:壓縮和混淆代碼
2襟诸、CommonsChunkPlugin: 提高打包效率，將第三方庫和業(yè)務(wù)代碼分開打包
3仗考、ProvidePlugin:使用時(shí)不再需要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"},//報(bào)錯(cuò) 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"], //報(bào)錯(cuò) value1 is not defined
ARRAY3: ["'value1'", "'value2'"],// ARRAY3= { '0': 'value1', '1': 'value2' }
NUMBER: 12,
BOOL: true,
ali: 12
})
DefinePlugin實(shí)際用于處理開發(fā)環(huán)境和生產(chǎn)環(huán)境的不同
比如一些 debug 的功能在生產(chǎn)環(huán)境中需要關(guān)閉、開發(fā)環(huán)境中和生產(chǎn)環(huán)境中 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) {
// 開發(fā)環(huán)境下的邏輯
} else {
// 生產(chǎn)環(huán)境下
}
html-webpack-plugin:根據(jù)模板自動(dòng)生成html文件对人，并自動(dòng)引入css和js
extract-text-webpack-plugin:把js文件中引用的樣式單獨(dú)抽離成css文件
clean-webpack-plugin:打包開始前清空打包目錄
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
參考文章：
【webpack之loader和plugin簡(jiǎn)介】（https://zhuanlan.zhihu.com/p/28245984）
【webpack.DefinePlugin使用介紹】（https://blog.csdn.net/qq_34035425/article/details/98630652）
