在Webpack中构建多页应用可以通过以下步骤进行配置:
-
在项目文件夹中创建多个页面的入口文件。每个页面一个入口文件,例如
page1.js
,page2.js
等。每个入口文件都需明确定义其对应的 HTML 模板文件。 -
在Webpack配置文件中,通过
entry
属性指定每个入口文件。
- 使用
HtmlWebpackPlugin
插件来自动生成 HTML 文件。在Webpack配置文件中进行如下配置:
在上述配置中,我们使用 HtmlWebpackPlugin
生成了 page1.html
和 page2.html
文件。通过 filename
属性指定生成的文件名,通过 template
属性指定模板文件的路径。通过 chunks
属性指定使用哪些入口文件对应的代码块。
- 可选地,配置
output
属性来指定输出的文件名和路径。在Webpack配置文件中进行如下配置:
上述配置中,我们使用 [name]
占位符来根据入口文件的名称为每个输出的 JavaScript 文件命名。
这样配置完成后,Webpack会根据每个入口文件生成对应的 HTML 文件和 JavaScript 文件,以及可能的 CSS 文件等其他资源文件。