什么是 wnm？
wnm 是一款基于 Webpack 的多页面应用脚手架，它可以帮助前端开发者快速构建多页面应用，并且提供了丰富的特性和插件，例如：
- 热更新
- 模板引擎
- CSS 预处理器
- 图片压缩
- 雪碧图生成
- 自动化部署
wnm 的官网地址是 https://github.com/wnm/wpm，我们可以在该页面找到更多详细的信息和文档。
安装 wnm
安装 wnm 很简单，我们只需要执行以下命令：
npm install wnm --save-dev
使用 wnm
安装完 wnm 之后，我们可以通过以下几个步骤来使用它：
1. 初始化项目
在我们的项目目录下执行以下命令：
npx wnm init
wnm 会在当前目录下自动创建一个新的项目，它的目录结构如下：
-- -------------------- ---- -------
-
--- ----------
--- ------------
--- ------
- --- -----------
- --- ----------
--- -------
- --- --------
- --- ---------
- --- ------
--- ---
--- ------
- --- ------
- --- ------
--- -----
- --- -----
- --- ----------
- --- --------
--- -----我们可以在 src/pages 目录下创建新的页面。
2. 开发调试
执行以下命令可以启动一个本地服务器：
npx wnm start
wnm 会在本地启动一个 Web 服务器，并自动打开默认浏览器。我们可以在浏览器中访问 http://localhost:8080 来查看我们的页面。
在我们修改源码之后，wnm 会自动编译并刷新浏览器，提供了非常方便的热更新功能。
3. 编译打包
我们可以使用以下命令来编译我们的项目：
npx wnm build
wnm 会将编译后的文件打包在 dist 目录下。
4. 高级配置
wnm 支持很多高级配置，例如：
- 添加全局变量
- 使用 CSS Modules
- 配置代理
- 配置自动化部署
我们可以在项目根目录的 wnm.config.js 文件中配置这些选项。
示例代码
我们可以通过以下示例代码来演示 wnm 的基本使用：
-- -------------------- ---- -------
---- -------------------------- ---
--------- -----
------
------
----- ----------------
---------- ----------
-------
------
---------- ---------
-------
-------// src/pages/index/index.js
console.log('Hello, wnm!');执行 npx wnm start 命令可以启动本地服务器，我们在浏览器中访问 http://localhost:8080 就可以看到我们的页面了。如果修改了源码，wnm 会自动编译并刷新浏览器。
执行 npx wnm build 命令可以将编译后的文件打包在 dist 目录下。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668efd9381d61a3540d21