worker-loader 内联做什么？答案

【问题标题】：What Does worker-loader Inline Do?worker-loader 内联做什么？
【发布时间】：2021-01-07 16:45:38
【问题描述】：

我的理解是以下 Webpack worker-loader 配置：

...
module: {
    rules: [
        {
            test: /worker\.js/,
            loader: "worker-loader",
            options: {
                inline: 'fallback',
            }
        }
        { ... }
    ]
}
...

会将工作文件（在本例中名为 worker.js）与其他 JS 文件捆绑到输出文件中，从而产生单文件输出。然后在应用程序中加载文件使用

import Worker from "worker-loader!./worker.js";

将成功加载 Worker。经过测试，似乎我理解错了。 inline 不会将worker打包成单个文件；它在输出目录中创建一个单独的文件。

那么，inline 到底在做什么呢？

【问题讨论】：

当你在 webpack 中使用加载器时，你正在为文件的导入创建规则。在加载模块时使用内联工作程序会否决 webpack.config.js 中的模块加载器。您应该只使用导入 Worker。 import Worker from 'worker.js';。从文档看来，inline 只是用于不支持工作人员的浏览器的后备，这在当今是一个罕见的例外。 caniuse.com/webworkers。它会创建一个单独的文件，但如果使用支持 WebWorker 的浏览器，则不应使用它。
well worker 是另一个 js 解释器实例，它评估一些代码，并且代码作为来自主进程的 blob 或者它指向您的“单独文件”的路径传递到 worker 中跨度>
内联符号只是指定应该为特定的导入文件使用什么加载器。

标签： javascript web webpack worker worker-loader

【解决方案1】：

存在内联加载器语法以允许您在特定实例中覆盖项目中工作程序的默认配置。这可能包括为 webworker 分配文件名以输出。

它在 Webpack@4.x 中更有用。现在 Webpack@5.x 已经发布，使用内联加载器的理由越来越少。

更重要的是，Webpack@5.x 不需要工作加载程序。

但是现在对于一些可能不受欢迎的消息 - 工作人员必须始终在他们自己的独立文件中，除非您将它们作为 blob 加载，这可能会对您的站点/应用程序产生安全隐患。

【讨论】：