简介
随着前端技术的不断发展，我们越来越多地使用 npm 来管理前端项目中的依赖包。而 wwmp-cli 是一个基于 webpack 的多页面脚手架，方便我们快速地搭建多页面项目。
为什么选择 wwmp-cli
- 基于 webpack，支持常见的前端打包需求
- 支持 sass，less，postcss 等预编译语言
- 支持 es6/es7 语法，通过 babel 转译
- 支持多页面，无需手动配置多入口
- 支持开发环境，测试环境，生产环境的配置
安装
在开始使用 wwmp-cli 之前，需要先安装 Node.js 和 npm。安装好之后，可以使用以下命令进行全局安装：
npm install -g wwmp-cli
安装完成后，可以使用以下命令检查版本号：
wwmp -v
使用
初始化项目
在任意文件夹中新建一个项目文件夹，并在命令行中进入该目录。然后执行以下命令：
wwmp init
执行完之后，会有以下提示：
- 请输入项目名称: （默认为文件夹名称，可自行变更）
- 请输入项目版本号:（默认为 1.0.0，可自行变更）
- 请输入项目描述:（默认为空，可自行添加）
开发
在根目录执行以下命令启动开发服务器：
npm run dev
访问 http://localhost:8080/ 可以看到默认的页面已经成功运行。
要添加新页面，只需在 src/pages 目录下添加一个新的目录，目录下新建一个 index.html 和一个 index.js。
比如我们添加一个 about 页面，只需在 src/pages 目录下新建一个 about 文件夹，然后在里面新建一个 index.html 和一个 index.js。其中 index.html 中的代码可以用以下模板替换：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------ ------------ ----- --------------- ---------------------------- ------------------- ------- ------ --------- --------- ------- -------------------------- ------- -------
index.js 中的代码也可以用以下模板替换：
console.log('Hello About Page!');随后重启开发服务器，访问 http://localhost:8080/about.html 即可查看 about 页面。
打包
在根目录执行以下命令即可打包：
npm run build
打包完成后，会在根目录的 dist 目录下生成打包后的文件。
可以通过以下命令将打包后的文件部署到服务器：
npm run deploy
配置
默认情况下，wwmp-cli 已经配置了基本的 webpack 配置。如果需要更改配置，可以在根目录下新建一个 wwmp.config.js 文件，并在其中覆盖默认配置。
以下为默认配置：
-- -------------------- ---- -------
-------------- - -
---- -
----------- ----
----- ------------
----- -----
------ -----
--
------ -
----------- ----
--------------- -----
------------------ ------
----------- ------
--
------ -
------ -
------ -----------------
--------- -------------------
--------- -------------
------ ------ ------
------- ----------------- --------------- ---------
--
--
------ ---
------- ---
------------- ---
--具体的配置项说明请参考 webpack 配置官方文档。
总结
通过本文，我们学习了如何使用 wwmp-cli 来快速搭建多页面项目，以及如何定制 webpack 配置来满足项目需求。相信大家在实际开发中能够更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d0927023822638