webpack进阶（三）：常用插件

在上面的文章中，我们用到过四个插件，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，这个需要事先进行一个比较。