生产模式下的 webpack 问题（缩小问题）答案

【问题标题】：Issue with webpack in production mode ( minification issue )生产模式下的 webpack 问题（缩小问题）
【发布时间】：2020-04-27 16:51:45
【问题描述】：

我正在为增强现实开发这个小项目，ARnft 它基于 Jsartoolkit5 的轻量级版本，JsartoolkitNFT 仅用于 NFT 标记。代码遵循 ES6 标准（部分）并使用 webpack 作为打包器。在开发模式下一切正常，但是当我进入生产模式时，该示例出现此错误：

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

它停在嵌入式 Worker 上。该应用程序不要进入内部，否则我将在开发控制台中收到一些消息。我将 Worker 注入到 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",

，但没有帮助。我该如何解决这个问题？

谢谢

【问题讨论】：

这可能是缩小器的错误。尝试缩小问题范围，然后提交错误报告。
@D.Pardal 谢谢你，我会试试的！
with: 'webpack --mode production --optimize-minimize -d' Blob Worker 被加载并且示例工作。问题在于这个函数 workerRunner 是如何由 minifier 处理的。我将在 webpack 存储库中打开一个问题。

标签： javascript webpack augmented-reality artoolkit jsartoolkit

【解决方案1】：

这个问题可以通过worker-loader插件解决。

而不是像问题中解释的那样将工作人员内联在 Blob 中：

创建外部 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 }
    }
}

您还可以在commit 和webpack 上查看此问题。

【讨论】：