webpack中通过splitChunks属性拆分出来的chunk该如何引入

在 webpack 中使用 `splitChunks` 属性拆分出来的 chunk，需要在 HTML 模板中引入对应的 chunk 文件。可以通过在 HTML 模板中手动添加 `<script>` 标签的方式引入，也可以使用插件自动生成。

手动引入的方式，可以在 HTML 模板中添加如下代码：

<script src="vendors~main.js"></script>
<script src="main.js"></script>

其中 `vendors~main.js` 是拆分出来的 chunk 文件的名称，可以根据实际情况进行调整。这种方式比较繁琐，需要手动维护引入的文件名，如果拆分出来的 chunk 名称发生了变化，还需要手动更新 HTML 模板。

自动生成引入的方式，可以使用 `html-webpack-plugin` 插件来实现。该插件可以在打包后自动生成引入拆分出来的 chunk 的代码，并插入到 HTML 模板中。具体配置如下：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      template: 'src/index.html',
      // 设置为 true，自动引入拆分出来的 chunk
      chunks: 'all',
    }),
  ],
};

通过设置 `chunks` 属性为 `'all'`，表示自动引入所有拆分出来的 chunk。这种方式比较方便，可以自动维护引入的文件名，也避免了手动维护的问题。