Question

在尝试了解动态导入如何与webpack配合使用时遇到问题。

这是仓库的链接：https://github.com/darewreck54/webpack_alias

因此，就webpack而言，有两个手动部分“ entity1和entity2）

webpack.config.js

`

  entry: {
    entity1: path.join(ROOT_DIR, 'entity1','src','main.tsx'),
    entity2: path.join(ROOT_DIR, 'entity2','src','main.tsx')
  },
  resolve: {
    '@entity1': path.join(ROOT_DIR, 'entity1','src')
  }
  output: {
    path: path.join(basePath, 'dist'),
    filename: '[name]_bundle.js',
    chunkFilename: '[name].bundle.js'
  },

`

如果这些捆绑包是独立的，我希望看到的是我看到的两个不同的捆绑包。

             Asset       Size   Chunks             Chunk Names
entity1_bundle.js   1.94 MiB  entity1  [emitted]  entity1
entity2_bundle.js   1.74 MiB  entity2  [emitted]  entity2
       index.html  288 bytes           [emitted]
Entrypoint entity1 = entity1_bundle.js
Entrypoint entity2 = entity2_bundle.js
[./entity1/src/hello.tsx] 489 bytes {entity1} [built]
[./entity1/src/loader.ts] 243 bytes {entity1} [built]
[./entity1/src/main.tsx] 286 bytes {entity1} [built]
[./entity2/src/hello.tsx] 316 bytes {entity2} [built]
[./entity2/src/main.tsx] 285 bytes {entity2} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {entity1} [built]

当我尝试添加动态导入时......

/entity2/src/hello.tsx

 import (/* webpackMode: "lazy", webpackChunkName: "entity1" */ '@entity1/loader').then( (ex) => {
    console.log("working");
    const app: any = new ex.default();
    app.printTest();

  });

在实体调用实体1中，Webpack通过以下方式将其捆绑：

             Asset       Size   Chunks             Chunk Names
entity1_bundle.js   1.94 MiB  entity1  [emitted]  entity1
entity2_bundle.js   1.74 MiB  entity2  [emitted]  entity2
       index.html  288 bytes           [emitted]
Entrypoint entity1 = entity1_bundle.js
Entrypoint entity2 = entity2_bundle.js
[./entity1/src/hello.tsx] 489 bytes {entity1} [built]
[./entity1/src/loader.ts] 243 bytes {entity1} {entity2} [built]
[./entity1/src/main.tsx] 286 bytes {entity1} [built]
[./entity2/src/hello.tsx] 551 bytes {entity2} [built]
[./entity2/src/main.tsx] 285 bytes {entity2} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {entity1} [built]

请注意，将loader.ts添加到了entity2，并在entity1中重复了。我希望当导入被触发时，它将动态请求entity1_bundle.js。但这确实发生了，因为将加载程序提取到了object2_bundle.js中，该文件最初是通过index.html加载的。

任何建议，谢谢，德里克

Webpack 4动态导入和代码拆分的问题

0 个答案: