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代碼是已經壓縮好了，如下圖：

 

感謝閱讀~~