简介
在前端开发过程中，我们经常需要使用 webpack 来打包构建我们的项目。其中， easywebpack-multiple-html-boilerplate 是一个基于 webpack 的多页应用开发脚手架，它可以方便地快速初始化一个多页应用项目。
本篇文章将详细介绍 easywebpack-multiple-html-boilerplate 的使用方法，包括构建项目、配置多页应用等。
安装
首先，我们需要全局安装 easywebpack 命令行工具：
npm install easywebpack-cli -g
接着，使用下面的命令安装 easywebpack-multiple-html-boilerplate：
easywebpack create easywebpack-multiple-html-boilerplate my-project
其中，my-project 参数为项目名称，可以替换为你自己的项目名称。
构建项目
安装成功后，进入项目目录，执行下面的命令安装依赖：
cd my-project npm install
执行下面的命令，启动项目：
npm start
然后，在浏览器中访问 http://localhost:3000，就可以看到项目的首页了。
配置多页应用
easywebpack-multiple-html-boilerplate 默认支持多页应用，我们只需要按照规定的目录结构来组织代码即可。下面是一个示例的多页应用目录结构：
-- -------------------- ---- -------
-----
--------
----------
------------
-------
------------
----------
------------
-------
------------
----------
------------其中，common 目录存放公共的 js 和 css 代码；page1 和 page2 目录下是具体页面的代码，每个页面包括一个 html 文件、一个 js 文件、一个 css（或 scss）文件。
修改 build/webpack.config.js 文件，配置 entry 和 html 页面的输出路径：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
-- ---
------ -
------- ------------------------
------ -----------------------
------ -----------------------
--
-- ---
------------ -
-- ---
----- -
-------------- ----------- -- - ------ ----- ---- ---
--------- -- ---- -- -- -
------ ----------------------- -----------------------------
--
--------- -- ---- -- -- -
------ ---------------
--
--------------- --------- -- ----------
------- ---------- ----------- --------- -- ---- -- -- -----------
-
--
-- ---
--完成上面的配置后，重新启动项目，就可以看到多个页面了。
至此，我们就完成了 easywebpack-multiple-html-boilerplate 的配置和使用教程。希望这篇文章能对大家有所帮助，更多信息可以查看 easywebpack-multiple-html-boilerplate 的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f8d9381d61a3540f52