Question

我正在使用动态导入从WebWorker加载按需代码。我已经在导入过程中设置了webpackChunkName，如下所示：

import(/* webpackChunkName: "dymod" */ './dymod.js').then(module => {

并且我在webpack.config.js中设置了以下输出

target: 'webworker'
output: {
  filename: 'worker.bundle.js',
  library: 'WorkerTest',
  chunkFilename: '[name]-[id]-[contenthash].js'
}

使用webpack构建会产生我期望的那种捆绑包...

Hash: cae2ed60548fabe99e31
Version: webpack 4.12.0
Time: 271ms
Built at: 06/21/2018 11:14:26 AM
                          Asset      Size  Chunks             Chunk Names
dymod-0-27f77ba50632f63a78c2.js  89 bytes       0  [emitted]  dymod
               worker.bundle.js  1.29 KiB       1  [emitted]  main
[0] ./worker.js 155 bytes {1} [built]
[1] ./dymod.js 22 bytes {0} [built]

但是，当我加载worker.bundle.js时，它将尝试加载0-0-27f77ba50632f63a78c2.js而不是dymod-0-27f77ba50632f63a78c2.js（换句话说，加载代码同时设置了[name]和[ id]设为[id]的值）。这将导致捆绑软件无法加载其动态导入。

这里有一个要点，有完整的例子 https://gist.github.com/dkirkman/9bce41d7f0e0451265769f33f4bbce6a

如果目标是“节点”或“ Web”而不是Webworker，则一切正常。如果我在chunkFileName中不使用[name]，它也可以工作。

是否有更正确的方法来设置chunkFileName？

即使这是一个代码错误而不是一个理解错误，下面的提交也可以“解决”该问题（从某种意义上说，它使worker.bundle.js加载了该块）

https://github.com/dkirkman/webpack/commit/ef0faabd0d6edd67fec25ede2d1ce43fd40ff653

Webpack：当目标是“ webworker”时，设置块名称的正确方法是什么？

0 个答案: