Webpack 4 动态导入不产生单独的块

Question

我正在尝试异步导入 lodash 作为示例，但它被包含在主块中了

Version: webpack 4.23.1

module.exports = {
  mode: "development",
  context: __dirname,
  devtool: 'sourcemap',
  entry: {
    "entry1": "./src/entry1.ts"
  },
  output: {
    path: __dirname + "/dist",
    filename: "[name].js",
    chunkFilename: "[name].js",
  },
  // ...
}

我编写了一个简单的代码来重现这个问题

document.addEventListener('DOMContentLoaded', async () => {
  console.log('DOMContentLoaded')
  // lodash should be made into a separate chunk
  // but it gets included in the entry1 chunk
  const _ = await import('lodash')
  console.log('loaded test chunk')
  console.log(_.concat)
})

完整的 repo 链接如下
https://github.com/unlocomqx/webpack4-async-chunk

Answer 1

我发现了我的错误

我在 tsconfig 中更改了 "module": "esnext",，它成功了！

Webpack 4 动态导入不产生单独的块

Webpack 4 dynamic import not producing separate chunk

dynamic-import

webpack