在上面的文章中，我们用到过四个插件，html的模板插件：HtmlWebpackPlugin，热更新的插件HotModuleReplacementPlugin，以及动态链接库所用到的webpack两个自带的插件DllPlugin和DllReferencePlugin，在这一章中，我们简单来介绍一下，还有哪些好用的插件，我们一起来看。
ProvidePlugin
我们首先还是来看一个webpack的自带插件，当我们需要在我们的系统中使用jQuery的时候，我们往往需要import $ from 'jquery';来实现引入，而当我们这个$使用的非常频繁的时候，我们会希望不去写这句引入，也能实现$的使用，这个时候我们就可以通过这个插件来实现。
const webpack = require('webpack');
···
plugins:[
new webpack.ProvidePlugin({
'$':'jquery'
})
]
···
这里需要注意的一点是，ProvidePlugin插件只是将jquery在每个模块开头自动注入，效果相当于import $ from 'jquery';，所以当我们使用window.$的时候，并取不到这个jquery的值。
DefinePlugin
这也是一个webpack的自带插件，可以用来让我们定义一个全局下的变量，比如我们可以这样定义一个DEV变量：
const webpack = require('webpack');
···
plugins:[
new webpack.DefinePlugin({
DEV:JSON.stringify('adf') // 这里需要注意的是，webpack默认吧这个值作为一个表达式来处理，所以，如果我们这个变量是string类型，我们需要把他作下特殊处理，给他在外面再包一层双引号，或者转义一下
})
]
···
CleanWebpackPlugin
接下来来看一个简单的插件clean-webpack-plugin，他可以在我们执行打包的时候默认删除之前打包的结果（默认删除output.path配置的路径下的文件），让我们打包输出的文件夹不会无限制的放大。
使用起来非常简单：
首先我们引入这个插件yarn add clean-webpack-plugin -D，然后就可以直接在webpack.config.js中使用:
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); // 这里值得一提的是，在webpack4之后，这个插件使用解构的方式来获取
···
plugins:[
new CleanWebpackPlugin()
]
···
BundleAnalyzerPlugin
这个插件可以让我们看到项目中所用到的每个包的体积，使用起来非常简单，首先下载插件：
yarn add webpack-bundle-analyzer -D
然后在项目中引入既可：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
···
plugins:[
new BundleAnalyzerPlugin ()
]
···
然后当我们再次npx webpack的时候他会默认打开http://127.0.0.1:8888/来查看分析结果。
UglifyjsWebpackPlugin
这个插件可以用于压缩我们的代码，减少我们的代码体积。值得注意的是，这个模块对我们node（6.9.0+）和webpack（4.0.0+）的版本有要求。
我们首先来下载这个插件：
yarn add uglifyjs-webpack-plugin -D
这个插件的使用和上面的不同，他是在optimization中使用，如下：
const path = require('path');
const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
mode:'development',
entry:'./index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
optimization: {
minimizer: [new UglifyJsWebpackPlugin()]
}
};
MiniCssExtractPlugin
这个插件的作用主要体现在两个方面：
1.将系统中的css内容按照入口文件的形式来进行分类。
2.css模块化。
首先我们还是来引入这个插件：
yarn add mini-css-extract-plugin -D
然后我们可以写一个css，比如a.css：
.style1{
color:red;
}
然后我们可以这样使用
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
module.exports = {
mode:'development',
entry:'./index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
use:{
loader:'babel-loader',
options:{
presets:['@babel/preset-react','@babel/preset-env']
}
}
},
{
test:/\.css$/,
use:['style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: {
// 重新生成的 css 类名
localIdentName: '[name]_[local]-[hash:base64:5]'
}
}
}]
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./index.html',
output:'index.html'
}),
new MiniCssExtractPlugin({
// filename: 'css/[name].css',
})
]
};
这样我们可以看一下打包好的dist目录，发现多了个main.css的文件，打开它可以看到我们的写的css属性，已经被按照我们的规则加上了参数：
.a_style1-GQ6WK{
color: red;
}
happypack
最后我们再来看一下实现多线程打包，快乐打包。
首先下载happypack模块：
yarn add happypack -D
然后我们可以这样配置：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
module.exports = {
mode:'development',
entry:'./index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
use: 'happypack/loader?id=happyJs',
},
{
test:/\.css$/,
exclude:/node_modules/,
use: 'happypack/loader?id=happyCss'
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./index.html',
output:'index.html'
}),
new HappyPack({
id: 'happyJs', //用来标识处理那一类文件
//和loader配置一样
loaders: [{
loader: 'babel-loader',
options:{
presets:['@babel/preset-react','@babel/preset-env']
}
}],
threadPool: happyThreadPool, // 线程池
verbose: true, // 是否输出日志
}),
new HappyPack({
id: 'happyCss', //用来标识处理那一类文件
//和loader配置一样
loaders: ['style-loader','css-loader'],
threadPool: happyThreadPool, // 线程池
verbose: true, // 是否输出日志
})
]
};
我们可以配置两个happypack来分别打包js和css文件。
值得一提的是，当我们项目比较小的时候，happypack可能不能达到加快打包速度的目的，反而会拖慢这个速度，所以是否要在我们的项目中引入这个happypack，这个需要事先进行一个比较。
