webpack8--删除dist目录，压缩分离后的CSS

一、删除dist目录

有时候我们需要在打包文件之前删除之前打包的dist目录，如何做？

1.安装new cleanWebpackPlugin(['dist'])

npm install clean-webpack-plugin --D

2.在webpack.config.js中引入该模块

const cleanWebpackPlugin = require('clean-webpack-plugin');

3.在webpack.config.js中的plugins进行配置

plugins: [
    new cleanWebpackPlugin(['dist']) //清理dist文件夹
]

4.执行 npm run start

二、压缩分离后的CSS

1.安装 optimize-css-assets-webpack-plugin 和 cssnano

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

2.在webpack.config.js中引入该模块

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

3.在webpack.config.js中的plugins添加如下配置

plugins: [
    new OptimizeCssAssetsPlugin({
        cssProcessor: require('cssnano'),
        cssProcessorPluginOptions: {
            preset: ['default', { discardComments: { removeAll: true } }],
        },
        canPrint: true
    })
]

4.执行 npm run start

我们可以看到此时的CSS代码是已经压缩好了，如下图：

感谢阅读~~