如何獲取由Webpack重命名的文件名？

Question

我在項目中使用的是Emscripten編譯的webassembly文件。 而且由於我的項目使用Webpack，因此它將重命名所有文件，因此Emscripten模塊找不到更多的webassembly文件。

然后，我需要獲取webassembly文件的新文件名才能加載它。

我發現這個解決辦法 ，但我希望有一個更好的解決辦法，因為我不想做改變webpack.config.js與相關配置.wasm文件。

解釋背景：我有一個項目叫做bursh它使用的WebPack和進口模塊稱為scissors ，它具有webassembly文件。 所以我在尋找，並不需要因為責任的分離的更新配置，解決方案-沒有意義，在設定的配置brush出於某種原因被scissors

Answer 1

根據您的描述，您可能需要研究copy-webpack-plugin 。 Webpack通常將多個文件捆綁為一個或幾個較大的文件，但是如果您還想將文件復制到構建中，則此插件可以做到這一點。

Answer 2

我解決了這個問題。 我的解決方案是在scissors處添加Webpack以便在此項目中設置配置。

const path = require('path')

const rules = [
  {
    loader: 'file-loader',
    test: /huffman\.wasm$/,
    type: 'javascript/auto',
  },
]

rules.concat()

module.exports = {
  devtool: 'source-map',
  entry: './src/index.js',
  module: {
    rules,
  },
  node: {
    fs: 'empty',
  },
  output: {
    filename: 'scissors.js',
    libraryTarget: 'commonjs2',
    path: path.join(__dirname, './dist'),
    sourceMapFilename: 'scissors.js.map',
  },
}

我不知道這是否是最好的解決方案，因為現在我在brush項目和scissors項目中都有一個Webpack，那么它將增加我的代碼的復雜性……但是通過這種方式，我可以保持職責隔離。