在前端开发中，我们经常需要生成多页应用，但是手动创建每个页面太过繁琐，这时候可以使用 npm 包 multi-page-generator，通过简单的配置就可以自动生成多个页面。
安装 multi-page-generator
首先，在终端中进入项目根目录，然后执行以下命令：
npm install --save-dev multi-page-generator
这会在项目中添加 multi-page-generator 的依赖。
配置 multi-page-generator
在项目根目录下新建一个名为 mpg.config.js 的文件，该文件是 multi-page-generator 的配置文件。
配置文件需要导出一个对象，该对象包含了以下几个属性：
pages
pages 是一个对象，包含了需要生成的页面的信息，其每个属性表示一个需要生成的页面，属性名为页面文件名，属性值是一个对象，包括以下属性：
title：页面标题entry：页面主入口template：页面模板filename：生成的页面文件名chunks：与该页面关联的 chunk，可以是一个 chunk 名称的数组，也可以只是一个 chunk 名称
示例配置：
-- -------------------- ---- -------
-------------- - -
------ -
------ -
------ -----
------ ----------------------------
--------- -------------------------------
--------- -------------
------- --------- ---------
--
------ -
------ -------
------ ----------------------------
--------- -------------------------------
--------- -------------
------- --------- ---------
-
-
-outputDir
outputDir 是一个字符串，表示生成的页面输出的目录。
示例配置：
module.exports = {
outputDir: 'dist'
}publicPath
publicPath 是一个字符串，表示生成的页面引用资源的公共路径。
示例配置：
module.exports = {
publicPath: '/'
}chunks
chunks 是一个对象，包含了需要生成的 chunk 的信息，其每个属性表示一个需要生成的 chunk，属性名为 chunk 名称，属性值是一个数组，表示该 chunk 包含的模块。
示例配置：
module.exports = {
chunks: {
index: ['./src/pages/index/main.js', './src/modules/a.js', './src/modules/b.js'],
about: ['./src/pages/about/main.js', './src/modules/c.js', './src/modules/d.js'],
common: ['./src/modules/common.js']
}
}alias
alias 是一个对象，可以为一些常用的路径绑定别名，方便在代码中使用。
示例配置：
module.exports = {
alias: {
'@': path.resolve(__dirname, './src')
}
}生成多页应用
配置文件完成后，在终端中执行以下命令：
npx multi-page-generator
这会根据配置信息自动生成多个页面及其所需的 chunk，生成的页面会保存在配置文件中指定的输出目录中。
示例代码
一个完整的配置文件示例：
-- -------------------- ---- -------
----- ---- - ---------------
-------------- - -
------ -
------ -
------ -----
------ ----------------------------
--------- -------------------------------
--------- -------------
------- --------- ---------
--
------ -
------ -------
------ ----------------------------
--------- -------------------------------
--------- -------------
------- --------- ---------
-
--
---------- -------
----------- ----
------- -
------ ----------------------------- --------------------- ----------------------
------ ----------------------------- --------------------- ----------------------
------- ---------------------------
--
------ -
---- ----------------------- --------
-
-以上是对 multi-page-generator 的详细使用教程，希望可以对前端开发者在生成多页应用时有一定的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590d81e8991b448d67b6