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

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

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

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 拆分成它的 on 块。我怎样才能做到这一点并让我的网络工作者仍然运行？

谢谢！