利用webpack的watch模式自動打包，如何自動刪除上一次打包的文件？

rm -rf build/** && 打包操作

以下是適配webpack4的解決方案：

• 需要安裝 on-build-webpack2 插件
• 在webpack.config.js里面加入這么一段

const fs = require('fs')
const buildDir = './dist/' // 這里寫你自己的打包文件地址

...

config.plugins = config.plugins.concat([
    // 刪除build時舊的文件
    new WebpackOnBuildPlugin(function (stats) {
      const newlyCreatedAssets = stats.compilation.assets
      const unlinked = []
      const files = fs.readdirSync(path.resolve(buildDir))
      if (files.length) {
        files.forEach(file => {
          if (!newlyCreatedAssets[file]) {
            fs.unlinkSync(path.resolve(buildDir + file))
            unlinked.push(file)
          }
        })
        if (unlinked.length > 0) {
          console.log('刪除文件: ', unlinked)
        }
      }
    })
])

我找到解決辦法了，看這個問題。英文看不懂的話，看我的博客
總結(jié)就是

npm install --save-dev on-build-webpack

//webpack.config.js
var WebpackOnBuildPlugin = require('on-build-webpack');
var fs = require("fs");
//設(shè)置為你的目標文件夾地址
var buildDir = './dist/';
……//省略代碼，直接到plugins設(shè)置
plugins:[
    new WebpackOnBuildPlugin(function(stats) {
            const newlyCreatedAssets = stats.compilation.assets;
            const unlinked = [];
            fs.readdir(path.resolve(buildDir), (err, files) => {
              files.forEach(file => {
                if (!newlyCreatedAssets[file]) {
                  fs.unlink(path.resolve(buildDir + file));
                  unlinked.push(file);
                }
              });
              if (unlinked.length > 0) {
                console.log('刪除文件: ', unlinked);
              }
          });    
        })
]

最近剛好在做新的類似的架構(gòu)。

我在開發(fā)時候動態(tài)生成的js和css其實都是不帶chunkHash的，用文件目錄控制同名問題，所以不會出現(xiàn)這樣的問題。
在打包輸出的時候是可以用chunkHash獨立生成新的目錄文件。

題主，你這個問題確實應(yīng)該使用 clean-webpack-plugin 這個插件。

你說你已經(jīng)嘗試過使用這個插件，但是只能指定把某一個文件夾下面的文件都刪除，這句話其實是不正確的，clean-webpack-plugin 可以指定刪除某一文件夾下的某一類文件，你可以使用 node-glob 語法來指定你想要刪除的文件名稱。例如，下面是我的項目中的一處該插件的配置。

/* 每次編譯生產(chǎn)環(huán)境代碼時先將之前的文件刪除掉 */
new CleanWebpackPlugin(
  [
    'build/app.*.js',
    'build/*.chunk.js',
    'build/styles.*.css',
    'build/styles.*.css.map',
  ],
  {
    verbose: true,
    dry: false,
  }
),

另外，這個插件是在你編譯打包代碼之前運行的，因此你不必擔(dān)心編譯打包完成以后會把打包好的文件刪除。

或許你可以多看一下這個插件的使用手冊。