javascript - 我的 webpack 配置有什么问题？- 网络工作者没有加载splitChunks

Question

我有一个具有以下结构的项目：

Lib/ClassA, Lib/ReplyMsg   |   Lib/ClassA, Lib/ReplyMsg
    \           /          |       \           /
         app               |          worker

app被定义为我的入口点，它在 Lib 目录下导入了两个模块。我还定义了一个网络工作者worker，它导入这些相同的模块。

应用程序

import { TypeA } from './Lib/ClassA';
import { ICtorReport } from './Lib/ReplyMsg';

const handleIncoming = (m: any) => {
  const result: ICtorReport = m.data;
  console.log(`Main: ${result.main}`);
  console.log(`Worker: ${result.worker}`);
};
const worker = new Worker('worker.bundle.js');
worker.onmessage = handleIncoming;

let typeA_test = new TypeA('John', false);
let ctor: string = Object.getPrototypeOf(typeA_test).constructor.name;
let input = {
  instructions: 'Compare to local TypeA',
  mainCtor: ctor,
  obj: typeA_test,
}

worker.postMessage(input);

工人

import { TypeA } from './Lib/ClassA';
import { ICtorReport } from './Lib/ReplyMsg';

addEventListener('message', function (m: any) {
  if (m.data.instructions === 'Compare to local TypeA') {
    let {instructions, mainCtor, obj} = m.data;
    debugger;
    let ctors: ICtorReport = {
      main: mainCtor,
      worker: null,
    }
    let myTestObj = new TypeA('Worker');
    ctors.worker = Object.getPrototypeOf(myTestObj).constructor.name;
    if (mainCtor === ctors.worker) {
      console.log(`Constructors matched`);
    } else {
      console.log(`NO match, on constructor`);
    }
    // @ts-ignore
    this.postMessage(ctors);
  }
});

我想导出Lib为一个通用块，供app和使用worker。因此，在 中webpack.config.js，我像这样设置splitChunks部分：

webpack.config.js

    entry: {
      app:  './app.ts',
      worker: './Worker.ts',
    },
    splitChunks: {
      minSize: 1,
      cacheGroups: {
        default: false,
        Lib: {
          test: /[\\/]Lib[\\/]/,
          name: 'Lib',
          chunks: 'all'
        },
      },
    },

当我使用此配置进行构建时，正如我所料，会创建 Lib.bundle.js。但是，当我运行应用程序时，工作人员没有运行。如果我splitChunks从配置中删除，那么一切正常：创建工作程序，发布消息并运行日志语句。

不幸的是，我需要Lib拆分成它的大块。我怎样才能做到这一点并让我的网络工作者仍然运行？

谢谢！

标签： javascripttypescriptwebpackweb-workerwebpack-splitchunks