webpack - 如何选择某个 html 页面将使用哪些捆绑包？

Question

该项目

我有一个项目，其中网站视图是使用 Pug 编写的，然后编译为 HTML。

index.pug ---> index.html

因为我希望项目有不止一页，所以我也得到了这个：

about.pug ---> about.html

现在，这些页面中的每一个都有条目，在webpack.config.js：

{
  entry: {
    index: ['scripts/index.ts'],
    about: ['scripts/about.ts'],
  }
}

我认为两者都使用一个包并不好，因为导入的模块对于每个页面条目都是唯一的（也就是说：如果我知道我在说什么）。

问题

生成 HTML 时，会自动在两个页面html-webpack-plugin中注入两个捆绑包，这比我刚才解释的要糟糕。

我怎样才能告诉它只注入我想要的包？

ps：我尝试在*.pug文件中手动包含它们中的每一个。虽然，生成的捆绑文件名具有哈希值，以实现缓存清除。

Answer 1

在写这个问题之前，我花了三个小时寻找一个解决方案。

虽然，在提交之后，我刷新了搜索页面并找到了解决方案。

这是关于块的。

您将选项哈希传递给html-webpack-plugin，其中有一个名为“块”的属性。此属性可以采用字符串数组，其中包含所需条目的名称。

{
  plugins: [

    new HtmlWebpackPlugin({
      template: 'views/index.pug',
      scriptLoading: 'defer',
      filename: 'index.html',
      chunks: [
        "index"
      ]
    }),

    new HtmlWebpackPlugin({
      template: 'views/about.pug',
      scriptLoading: 'defer',
      filename: 'about.html',
      chunks: [
        "about"
      ]
    }),

    new HtmlWebpackPugPlugin()
  ]
}

抱歉，添麻烦了。