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

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

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

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

...

config.plugins = config.plugins.concat([
    // 刪除build時(shí)舊的文件
    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)
        }
      }
    })
])

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

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

//webpack.config.js
var WebpackOnBuildPlugin = require('on-build-webpack');
var fs = require("fs");
//設(shè)置為你的目標(biāo)文件夾地址
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);
              }
          });    
        })
]

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

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

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

你說(shuō)你已經(jīng)嘗試過(guò)使用這個(gè)插件，但是只能指定把某一個(gè)文件夾下面的文件都刪除，這句話其實(shí)是不正確的，clean-webpack-plugin 可以指定刪除某一文件夾下的某一類(lèi)文件，你可以使用 node-glob 語(yǔ)法來(lái)指定你想要?jiǎng)h除的文件名稱(chēng)。例如，下面是我的項(xiàng)目中的一處該插件的配置。

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

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

或許你可以多看一下這個(gè)插件的使用手冊(cè)。