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

Posted 2023-02-22

【中文标题】如何获取由 Webpack 重命名的文件名？

【英文标题】：How to get a filename renamed by Webpack?

【发布时间】：2019-03-06 08:42:14

【问题描述】：

我在我的项目中使用 Emscripten 编译的 webassembly 文件。 而且由于我的项目使用了Webpack，它重命名了所有文件，那么Emscripten模块就找不到更多的webassembly文件了。

然后我需要获取 webassembly 文件的新文件名才能加载它。

我找到了this workaround，但我想要一个更好的解决方案，因为我不想用关于.wasm 文件的配置来更改webpack.config.js。

解释上下文：我有一个名为 bursh 的项目，它使用 Webpack 并导入一个名为 scissors 的模块，其中包含 webassembly 文件。因此，我正在寻找一种不需要更新配置的解决方案，因为职责的隔离——由于某种原因scissorsbrush 设置配置没有意义

【参考方案1】：

根据您的描述，您可能想查看copy-webpack-plugin。 Webpack 通常将多个文件打包成一个或多个较大的文件，但如果您还想将文件复制到您的构建中，这个插件可以做到这一点。

【讨论】：

但在这种情况下，我需要更改webpack.config.js 来设置这个新规则，对吧？由于职责隔离，我正在寻找一种不需要更新配置的解决方案。使用 webassembly 的项目部分是使用 Webpack 的部分使用的模块。

是的，如果你根本无法编辑 webpack 配置，那么这个解决方案对你没有帮助，对不起。

【参考方案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，那么它会增加我的代码的复杂性......但是这样我可以保持职责的隔离。