Webpack构建项目中使用Worker API出现404，如何正确创建Worker？

我之前也踩过这个坑！Webpack的模块打包逻辑和浏览器直接引用文件完全不一样，你直接用import导入Worker文件后传给new Worker()是行不通的——因为导入的模块并不是浏览器能识别的Worker脚本URL。下面给你两种靠谱的解决办法：

方法一：使用worker-loader（兼容Webpack 4及以下版本） #

这是过去处理Worker最常用的方案，先安装对应的loader：

npm install worker-loader --save-dev

方式1：导入时直接指定loader #

修改你的代码为：

import HardWorker from 'worker-loader!./src/hardWorker.js';
const myWorker = new HardWorker();

这种写法会让Webpack把hardWorker.js单独打包成一个独立的Worker脚本，HardWorker就是处理好的Worker类，直接实例化即可。

方式2：在Webpack配置中全局配置loader #

如果不想每次导入都写worker-loader!前缀，可以在webpack.config.js里添加规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.worker\.js$/, // 匹配带.worker后缀的Worker文件
        use: { loader: 'worker-loader' }
      }
    ]
  }
};

然后把你的Worker文件重命名为hardWorker.worker.js，导入方式就能简化成：

import HardWorker from './src/hardWorker.worker.js';
const myWorker = new HardWorker();

方法二：用Webpack 5内置的Worker支持（推荐） #

如果你的项目用的是Webpack 5，那就更省心了——它已经内置了Worker处理能力，不需要额外安装loader。直接用URL构造函数指定Worker文件路径：

const myWorker = new Worker(new URL('./src/hardWorker.js', import.meta.url));

这里的new URL(...)会告诉Webpack把这个Worker文件单独打包成一个独立的chunk，自动生成正确的访问URL，自然就不会出现404错误了。

最后说下为什么原来的方式不行：Webpack会把所有模块打包进主bundle或拆分的chunk中，你原来写的src/worker.js路径在打包后的项目里根本不存在，浏览器找不到文件自然返回404。上面两种方法都是让Webpack把Worker脚本当成独立资源处理，生成了正确的访问路径。

内容的提问来源于stack exchange，提问作者Wordpressor