多个入口点/模板的Webpack配置

Question

有一个任务 - 我有一个包含视图的文件夹：

--views
----view1
------view1.js
------view1.html(or jade)
----view2
------view2.js
------view2.html(or jade)

所以，我需要为webpack创建一个简单的配置，它可以创建以下输出到“public”文件夹：

--public
----js
------view1.js
------view2.js
----view1.html
----view2.html

我明白，我可以使用多个入口点：

  entry: {
    view1: './views/view1/view1'
    view2: './views/view2/view2
  }

我理解，可以使用HtmlWebpackPlugin将bundle(public/js/view1.js)注入到public/view1.html中。但是对于多个点怎么办？必须为每个html视图添加HtmlWebpackPlugin吗？提前致谢！

- malcoauri

---

我有完全相同的问题，你最终解决了吗？ - leojh

Answer 1

如果您想要创建多个 .html 页面，您需要为每个页面添加多个 HtmlWebpackPlugin 部分。

这是我自己配置文件的样例：

plugins: [
  new HtmlWebpackPlugin({
    title: 'SearchView',
    chunks: ['manifest', 'vendor', 'searchView'],
    template: `${PATHS.app}/index.ejs`, // Load a custom template
    inject: 'body', // Inject all scripts into the body
    filename: 'searchView.html'
  }),
  new HtmlWebpackPlugin({
    title: 'TicketView',
    chunks: ['manifest', 'vendor', 'ticketView'],
    template: `${PATHS.app}/index.ejs`, // Load a custom template
    inject: 'body', // Inject all scripts into the body
    filename: 'ticketView.html'
  })
]

chunks 属性很重要，因为它可以让您仅选择每个页面所需的资源。

- leojh

---

我有一个类似的用例。我有一个单页应用程序，我希望将注册页面作为一个独立的包提供。我的问题通过上述解决方案得到了解决，但仍然存在一个小问题。对于上述解决方案，我需要将URL写为'/signup.html'，但如果有任何方法，在我写入'/signup'时加载注册包，那将是非常有帮助的。提前感谢。 - monica

这会减慢构建速度。 - sonnenhaft