webpack 4.0 中 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'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  ...

};

在終端上運行：

$ npm run build

 

 

看看 dist 目錄：

dist ├── app.bundle.e56abf8d6e5742c78c4b.js ├── index.html └── style.css 

你再把 src/index.js 改改內容，然后再執行 npm run build。 

再多運行幾次，生成的帶 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

plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
        
]

現在運行 npm run build 試試

注意的是：在最新版的webpack中 new CleanWebpackPlugin()；中不需要寫里面的目標路徑，會自動清除生成的文件夾，比如是build文件夾。

 

轉載：https://www.jianshu.com/p/f4a209d58c35