webpack-plugin

plugins:

clean-webpack-plugin:

clean-webpack-plugin用于在打包前清理上一次项目生成的bundle文件，它会根据output.path自动清理文件夹；这个插件在生产环境用的频率非常高，因为生产环境经常会通过hash生成很多bundle文件，如果不进行清理的话每次都会生成新的，导致文件夹非常庞大；这个插件安装使用非常方便：

 

安装：

npm i -D clean-webpack-plugin

　配置：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    //其他配置
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html',
        })
    ]
}

mini-css-extract-plugin：

我们之前的样式都是通过style-loader插入到页面中去，但是生产环境需要单独抽离样式文件，mini-css-extract-plugin就可以帮我从js中剥离样式：

　安装：

npm i -D mini-css-extract-plugin

　配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    //其他配置
    module: {
        rules: [
            {
                test: /\.less/,
                use: [{
                    loader: isDev ? 'style-loader' : MiniCssExtractPlugin.loader
                },{
                    loader: 'css-loader'
                },{
                    loader: 'less-loader'
                }]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].[hash:8].css",
        })
    ]
}

optimize-css-assets-webpack-plugin:

我们可以发现虽然配置了production模式，打包出来的js压缩了，但是打包出来的css确没有压缩；在生产环境我们需要对css进行一下压缩：

安装：

npm i optimize-css-assets-webpack-plugin -D

　配置：

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
    //其他配置
    plugins: [
        new OptimizeCSSAssetsPlugin(),
    ]
}

copy-webpack-plugin:

 把不能被webpack打包的静态资源文件拷贝到打包文件中

安装：

npm i -D copy-webpack-plugin

　配置：

const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: 'public/js/*.js',//源文件目录
                    to: path.resolve(__dirname, 'dist', 'js'),//拷贝到的文件目录
                    flatten: true,
                }
            ]
        }),
    ]
}