使用mutliple html / js / css文件的Webpack项目

Question

我认为我已经了解了Webpack的工作原理。 我的问题是：大多数教程/示例都基于单个index.html 。 那么，我如何组织多个页面的webpack.config.js和目录结构？

我们假设我需要以下内容：

1. index.html带有css和js文件
2. dashboard.html带有css和js文件
3. profile.html与css和js文件

这是我没有得到的：

1. 你会如何构建你的src和dist文件夹？
2. 我如何配置Webpack？ 可能与HtmlWebpackPlugin （？）
3. 单个index.js文件是否足以作为入口点/如何构建index.js文件/ ES6项目如何看起来一般？

一个示例项目会有很大帮助。 一个不仅仅是一个示例index.html文件的项目。

祝你有美好的一天！ :)

Answer 1

我认为你可以通过将html+js+css转换为web组件来实现这一点，你可以通过框架轻松地做到这一点，我认为Vue js给出了非常好的样板完整Webpack模板让你这样做才开始考虑其他页面作为一个新组件记得你使用webpack来获取一个包

Answer 2

因此，您可以通过传入命令行arg来构建正确的包，从而使一个监视输出多个包类型。 webpack中可以有多个入口点，但webpack只能构建输出一个bundle。 因此，为了解决这个问题，我认为将命令行arg传递给webpack是一种干净的方式，可以在保持一个配置文件的同时拥有多个捆绑可能性。

要了解如何实现这一目标，请查看...

https://www.hipstercode.com/blog/27/