clean-webpack-plugin 的使用

 

當你每次用 webpack 編譯出不同檔名的檔案，而每次只會使用到最新的檔案，

其他舊的就會手動刪掉，但每次這樣刪也太累了，推薦使用 clean-webpack-plugin 套件。

 

範例結構如下

 

步驟一、

$ npm i clean-webpack-plugin --save-dev

 

步驟二、於 webpack.config.js 添加如下程式碼(黃底部份)

const path = require('
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin'); // v1.01 語法
// v3.0.0 the syntax will to be the below syntax
//const { CleanWebpackPlugin } = require('clean-webpack-plugin');
let cleanOptions = {
    exclude: ['index.html'],
}
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new CleanWebpackPlugin('dist', cleanOptions)
    ]
};

 

步驟三、執行編譯

編譯完，則會發現在 dist 資料內除了 index.html 之外，其他都會被自動清除掉了。

 

參考資料：

clean-webpack-plugin