别担心，我给你一个极简的可运行示例，涵盖从安装到配置、代码编写的全流程，还能解决你遇到的404问题：

第一步：安装worker-loader #

首先确保你已经安装了依赖：

npm install worker-loader --save-dev
# 或者用yarn
yarn add worker-loader --dev

第二步：配置Webpack（webpack.config.js） #

这里要做两个关键配置：一是添加worker-loader的规则，二是设置output.publicPath避免404（因为生成的worker文件会打包到dist目录，服务器需要正确识别这个路径）：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    // 关键：设置publicPath，确保worker文件能被正确加载
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.worker\.js$/,
        use: {
          loader: 'worker-loader',
          // 也可以在这里单独给worker设置publicPath，覆盖全局配置
          // options: {
          //   publicPath: '/dist/'
          // }
        }
      }
    ]
  },
  // 必须添加这个选项，让Webpack正确处理Worker的全局变量
  target: 'web'
};

第三步：创建你的Worker文件（src/MyWorker.js） #

写一个简单的Worker逻辑，比如处理消息并返回结果：

// 监听来自主线程的消息
self.addEventListener('message', (e) => {
  const result = `Worker处理后的数据：${e.data.toUpperCase()}`;
  // 把结果发回主线程
  self.postMessage(result);
});

// 可选：监听Worker销毁事件
self.addEventListener('close', () => {
  console.log('Worker已关闭');
});

第四步：在主线程中使用Worker（src/index.js） #

正确引入并使用Worker：

// 按照我们的配置，直接import后缀为.worker.js的文件即可
import MyWorker from './MyWorker.worker.js';

// 创建Worker实例
const worker = new MyWorker();

// 给Worker发送消息
worker.postMessage('hello web worker');

// 监听Worker返回的消息
worker.addEventListener('message', (e) => {
  console.log(e.data); // 会输出：Worker处理后的数据：HELLO WEB WORKER
});

// 可选：不需要Worker时销毁它
// worker.terminate();

第五步：运行打包并测试 #

执行打包命令：

npx webpack --mode development

打包完成后，dist目录下会生成bundle.js和对应的xxx.worker.js文件。

接下来你需要用服务器托管dist目录，比如用serve工具：

npm install -g serve
serve dist

访问服务器地址（默认是http://localhost:3000），打开控制台就能看到Worker的输出了，也不会出现404错误。

为什么之前会404？ #

通常是因为Webpack生成的worker文件路径不对，服务器没有正确映射到dist目录。设置output.publicPath: '/'后，浏览器会从根目录加载worker文件，而只要服务器把dist设为静态资源根目录，就能正确找到文件了。

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