webpack5配置多页面

1. 初始化项目

npm init -y

2. 安装需要的依赖

yarn add -D webpack webpack-cli html-webapck-plugin

3. 创建目录结构

在 src 目录下创建三个不同的页面目录 page1，page2, page3，再在页面目录中依次创建 index.html，index.js 文件。

node_modules
src
-| pages
-----| page1
---------| index.html
---------| index.js
-----| page2
---------| index.html
---------| index.js
-----| page3
---------| index.html
---------| index.js
webpack.config.js
package.json
yarn.lock

4. 配置 webpack.config.js 文件

4.1 修改 entry 属性

首先声明 3 个入口文件，再确定文件的输出位置。

module.exports = {
   
	entry: {
   
        //  三个入口文件
        page1: './src/pages/page1/index.js',
        page2: './s