一般这个插件是配合 这条命令来使用,就是说在为生产环境编译文件的时候,先把 build或dist (就是放生产环境用的文件) 目录里的文件先清除干净,再生成新的。

    如果还不理解为什么要用它,就看看下面的例子就可以知道的。

    webpack.config.js

    在终端上运行:

    1. $ npm run prod

    看看 dist 目录:

    你再把 src/app.js 改改内容,然后再执行 npm run prod

    再多运行几次,生成的带 hash 的 app.bundle.js 文件就会很多。

    1. dist
    2. ├── app.bundle.0e380cea371d050137cd.js
    3. ├── app.bundle.259c34c1603489ef3572.js
    4. ├── app.bundle.e56abf8d6e5742c78c4b.js
    5. ├── index.html
    6. └── style.css

    2. 使用 clean-webpack-plugin

    首先来安装。

    webpack.config.js

    1. const path = require('path')
    2. ...
    3. let pathsToClean = [
    4. 'dist',
    5. ]
    6. module.exports = {
    7. entry: {
    8. "app.bundle": './src/app.js'
    9. },
    10. filename: '[name].[chunkhash].js'
    11. },
    12. ...
    13. plugins: [
    14. new CleanWebpackPlugin(pathsToClean),
    15. ...
    16. new ExtractTextPlugin('style.css')
    17. ],
    18. ...
    19. };

    现在运行 npm run prod 试试,只有下面的文件:

    先到这里。