Webpack和React-Lazy代码拆分之后包括哪些捆绑软件？

Question

我是使用webpack的新手，所以我不太了解它的工作原理。

我已经在导入中使用webpack和React.Lazy将我的主捆绑包分成了多个较小的文件。

在构建过程之后，所有文件都可以正常运行并生成所有这些文件：

现在，我的问题是，我的应用只有一个入口点：index.html

我必须在index.html中包括哪些.js文件？

如果我只包括这个：

<script type="text/javascript" defer src="./js/vendors~main.js"></script>

我的应用运行时出错：

VM6636 vendors~main.js:22 ChunkLoadError: Loading chunk 0 failed.
(error: file:///*********************/dist/0.js)

在进行代码拆分之前，我只有两个不同的文件：main.js和vendor-main.js，因此在我的index.html中都导入了这两个文件。

提前谢谢！

-

如果重要的话，这是我的Webpack.config.js

  plugins: [

     new HtmlWebpackPlugin({
     filename: '../index.html',
     template: './src/index.html'
     }),
    ]

}

Answer 1

我相信您应该能够指示HtmlWebpackPlugin用inject option将所需的初始块插入index.html文件中。

// webpack.config.js

// ...

new HtmlWebpackPlugin({
  filename: '../index.html',
  template: './src/index.html',
  inject: true
}),

这意味着您可以从<script>模板中删除捆绑的index.html标签，因为该插件将为您处理。