webpack 3 零基礎入門教程 #9 - 用 clean-webpack-plugin 來清除文件

其實 clean-webpack-plugin 很容易知道它的做用，就是來清除文件的。

通常這個插件是配合 webpack -p 這條命令來使用，就是說在爲生產環境編譯文件的時候，先把 build或dist (就是放生產環境用的文件) 目錄裏的文件先清除乾淨，再生成新的。

1. 爲何要用 clean-webpack-plugin

若是還不理解爲何要用它，就看看下面的例子就能夠知道的。

webpack.config.js

const path = require('path')
...

module.exports = {
  entry: {
    "app.bundle": './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  ...
  
};

複製代碼

在終端上運行：

$ npm run prod
複製代碼

看看 dist 目錄：

dist
├── app.bundle.e56abf8d6e5742c78c4b.js
├── index.html
└── style.css
複製代碼

你再把 src/app.js 改改內容，而後再執行 npm run prod。

再多運行幾回，生成的帶 hash 的 app.bundle.js 文件就會不少。

dist
├── app.bundle.0e380cea371d050137cd.js
├── app.bundle.259c34c1603489ef3572.js
├── app.bundle.e56abf8d6e5742c78c4b.js
├── index.html
└── style.css
複製代碼

這些帶 hash 的 app.bundle.js 只有最新的纔有用，其餘的都沒用，咱們要在 build 以前把它們全清空，這真是 clean-webpack-plugin 發揮的做用。

2. 使用 clean-webpack-plugin

首先來安裝。

$ npm i clean-webpack-plugin --save-dev
複製代碼

webpack.config.js

const path = require('path')
...
const CleanWebpackPlugin = require('clean-webpack-plugin');

let pathsToClean = [
  'dist',
]

module.exports = {
  entry: {
    "app.bundle": './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  ...
  plugins: [
    new CleanWebpackPlugin(pathsToClean),
    ...
    new ExtractTextPlugin('style.css')
  ],
  ...
};

複製代碼

如今運行 npm run prod 試試，只有下面的文件：

dist
├── app.bundle.0e380cea371d050137cd.js
├── index.html
└── style.css
複製代碼

先到這裏。