在 Webpack 和 React-Lazy Code Splitting 之后包含哪些包？

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 和 vendors-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
}),

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

What bundles include after Webpack and React-Lazy Code Splitting?