一、刪除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程式碼是已經壓縮好了，如下圖：

感謝閱讀~~