与webpack的生产方式问题(小型化问题)

Question

我正在为增强现实做一个小项目，ARnft --它是基于Jsartoolkit5的一个更轻的版本，JsartoolkitNFT只用于NFT标记。代码遵循ES6标准(部分)，并使用webpack作为绑定器。在开发模式中一切都很好，但是当我进入生产模式时，这个示例仍然存在以下错误：

05ff8846-4121-4380-86c3-9612f404732a:1 Uncaught SyntaxError: Function statements require a function name

它停在嵌入的工人身上。该应用程序不进入内部，因为我否则我会收到一些消息，在开发控制台。我将工人注入Blob对象：

// create a Worker to handle loading of NFT marker and tracking of it
const workerBlob = new Blob(
  [workerRunner.toString().replace(/^function .+\{?|\}$/g, '')],
    { type: 'text/js-worker' }
  )
const workerBlobUrl = URL.createObjectURL(workerBlob)

worker = new Worker(workerBlobUrl)

https://github.com/kalwalt/ARnft/blob/8322585aa0f863917c6d1cee541356ff3b7c36a0/src/utils/Utils.js#L207-L213

在这一行中定义的workerRunner：

https://github.com/kalwalt/ARnft/blob/8322585aa0f863917c6d1cee541356ff3b7c36a0/src/utils/Utils.js#L272

我认为这是一个缩小的问题，我试图在脚本中添加--optimize-minimize：

"build-es6": "webpack --mode production --optimize-minimize",

但没有帮助。我怎么才能解决这个问题？

谢谢

Answer 1

这个问题可以用装载机插件解决。

与其像问题中所解释的那样，将工人插入块中：

• 创建外部Worker.js并在文件中导入(在本例中为Utils.js)：

import Worker from './Worker.js' 

• 如往常一样使用该工人：

let worker
// other code
worker = new Worker()
// other code with postMessage and onmesssage...

• 在wepback.config.js中

{
  test: /\worker\.js$/,
    use: {
      loader: 'worker-loader',
        options: { inline: true, fallback: false }
    }
}

您还可以看到这个提交和webpack上的问题。