我在我的项目中使用Emscripten编译的webassembly文件。由于我的项目使用Webpack,它重命名所有文件,然后Emscripten模块找不到更多的webassembly文件。
然后我需要获取webassembly文件的新文件名才能加载它。
我找到了this workaround,但我想要一个更好的解决方案,因为我不想用webpack.config.js
文件的配置更改.wasm
。
解释上下文:我有一个名为bursh
的项目,它使用Webpack并导入一个名为scissors
的模块,它具有webassembly文件。所以我正在寻找一种不需要更新配置的解决方案,因为职责分离 - 由于某种原因brush
在scissors
设置配置没有意义
根据您的描述,您可能需要查看copy-webpack-plugin。 Webpack通常将多个文件捆绑成一个或几个较大的文件,但如果您还想将文件复制到您的构建中,这个插件就可以做到这一点。
我解决了这个问题。我的解决方案是在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,然后它会增加我的代码的复杂性......但是这样我就可以保持职责的孤立。