在 webpack 構建過程之后連接 JS 文件

Question

我試圖在 webpack 構建過程之后連接兩個 js 文件。 目標是提供一個包含 ES6 模塊和遺留代碼的 js 文件。

已經嘗試過webpack-concat-files-plugin 之類的插件，但沒有成功。 這對我來說很有意義，因為執行插件時 output 文件不存在。

另一個想法是在afterCompile鈎子中執行一個小腳本，它處理兩個文件的連接。 這是做這種事情的常用方法還是有其他方法可以實現目標？

謝謝你的幫助。

---

基本示例：

module.exports = {
  entry: {
    app: 'app.js',
    legacy: [
      'legacy-1.js',
      'legacy-2.js', 
      // ...
    ]
  },
  output: {
    filename: path.join('dist/js', '[name].js'),
  }
}

Answer 1

按照建議解決了這個問題：

FileMergeWebpackPlugin.js

const fs = require('fs');

class FileMergeWebpackPlugin {
  constructor({ files, destination, removeSourceFiles }) {
    this.files = files;
    this.destination = destination;
    this.removeSourceFiles = removeSourceFiles;
  }

  apply(compiler) {
    const fileBuffers = [];

    compiler.hooks.afterEmit.tap('FileMergeWebpackPlugin', () => {
      this.files
        .filter(file => fs.existsSync(file))
        .forEach(file => fileBuffers.push(fs.readFileSync(file)))

      fs.writeFileSync(this.destination, fileBuffers.concat(), { encoding: 'UTF-8' })

      if (this.removeSourceFiles) {
        this.files.forEach(file => fs.unlinkSync(file));
      }
    });
  }
}

module.exports = FileMergeWebpackPlugin;

webpack.config.js

const FileMergeWebpackPlugin = require('./FileMergeWebpackPlugin');

module.exports = {
  entry: {
    app: 'app.js',
    legacy: [
      'legacy-1.js',
      'legacy-2.js',
    ]
  },
  output: {
    filename: path.join('dist/js', '[name].js'),
  },
  plugins: [
    new FileMergeWebpackPlugin({
      destination: 'dist/js/bundle.js',
      removeSourceFiles: true,
      files: [
        'dist/js/app.js',
        'dist/js/legacy.js',
      ]
    })
  ]
}

最終我會將其發布為 npm package，當我這樣做時會更新帖子

Answer 2

是的。

您可以創建自己的插件，在發射鈎子中激活 - 這個鈎子的參數是編譯。 您可以從此 object 獲取您希望連接的塊，並使用連接值創建一個新塊（或者只是將一個添加到另一個塊）