如何 select 某个 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，其中有一个名为“chunks”的属性。属性可以采用字符串数组，其中包含所需条目的名称。


{
  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()
  ]
}

抱歉给您带来麻烦。

如何 select 某个 html 页面将使用哪些捆绑包？

How to select what bundles a certain html page will use?

webpack

pug-loader