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

Question

I'm using a webassembly file compiled by Emscripten in my project. And since my project uses Webpack, it renames all files, then the Emscripten module can't find more the webassembly file.

Then I need to get the new filename of the webassembly file to can load it.

I found this workaround , but I want a better solution, because I don't want do change the webpack.config.js with configurations about the .wasm files.

Explain the context: I have a project called bursh that it uses Webpack and imports a module called scissors which it has the webassembly files. So I'm looking for a solution which doesn't need to update the configurations, because of the isolation of responsibilities - doesn't make sense to set configurations at brush for some reason by scissors

Answer 1

From your description you might want to look into copy-webpack-plugin . Webpack normally bundles multiple files into one or several larger files, but if you additionally want to copy files into your build, this plugin can do just that.

Answer 2

I resolved the problem. My solution is adding Webpack at scissors in order to set the configurations in this project.

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',
  },
}

I don't know if this is the best solution, because now I have a Webpack in brush project and also in scissors project, then it will increase complexity in my code... But in this way I can keep the isolation of responsibilities.