前言
wmake 是一个基于 Webpack 的前端工程构建工具，为前端项目开发和打包提供了便利。它是一个可以灵活定制和扩展的工具，支持多页面和单页面应用的打包构建。
本文将详细介绍 wmake 的安装及使用方法，并且给出一些常用的示例代码，帮助读者快速上手使用 wmake 。
安装
wmake 是一个 npm 包，可以直接通过 npm 安装：
npm install -g wmake
安装完成后，我们可以运行 wmake -v 验证 wmake 是否安装成功，如果能正常显示版本号，则表示安装成功。
基本用法
wmake 的基本用法非常简单，我们只需要在命令行中输入：
wmake [options]
其中可选项包括：
-w或者--watch，开启文件监控并实时重新编译；-c <config>或者--config=<config>，指定配置文件的路径；-p <port>或者--port=<port>，设置本地服务的端口号。
下面是一个简单的例子，假设我们有一个名为 main.js 的入口文件和一个名为 webpack.config.js 的配置文件，在项目根目录下执行以下命令即可进行打包：
wmake --config ./webpack.config.js
如果需要实时编译，并在本地服务上启动，可以执行以下命令：
wmake --watch --config ./webpack.config.js --port 3000
配置文件
wmake 的配置文件采用 Webpack 的配置文件格式，相信已有过 Webpack 使用经验的读者都能轻松上手。下面是一个简单的配置文件示例：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ ----------------
------- -
--------- ------------
----- ----------------------- ---------
--
------- -
------ -
-
----- --------
-------- ---------------
---- ----------------
--
-
----- ---------
---- ---------------- -------------
-
-
-
--在这个配置文件中，我们指定了入口文件和出口路径，同时配置了两个规则，用于编译处理 js 和 css 文件。读者可以根据自己的需求进行灵活定制。
示例代码
下面是一些常用的 wmake 示例代码，以供读者参考：
使用 wmake 编译处理 less 文件
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ ----------------
------- -
--------- ------------
----- ----------------------- ---------
--
------- -
------ -
-
----- ----------
---- ---------------- ------------- --------------
-
-
-
--这里我们添加了一条规则，用于处理 less 文件。其中 style-loader 和 css-loader 用于处理样式文件，less-loader 则用于将 less 文件编译成 css 文件。
使用 wmake 配置开发和生产环境
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - ----- ----- -- -
----- ----- - --------- --- --------------
------ -
------ ----------------
------- -
--------- ----- - ----------- - ----------------------------
----- ----------------------- ---------
--
-------- ----- - ------------ - ------
------- -
------ -
-
----- --------
-------- ---------------
---- ----------------
-
-
--
-------- -
--- -------------------
--------- ---------------------
--
-
--
--在项目开发中，我们通常需要为开发环境和生产环境分别配置不同的参数，以达到最佳的效果。这里我们使用了 Webpack v4 推出的一个新特性，根据 mode 来区分开发和生产环境。
使用 wmake 加载图片资源
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ ----------------
------- -
--------- ------------
----- ----------------------- ---------
--
------- -
------ -
-
----- -------------------------
------- -------------
-------- -
------ ------
----- -----------------------
-
-
-
-
--如果你的项目中需要加载图片等资源文件，这个示例代码可以帮助你修改配置文件。这里我们使用了 url-loader，用于在特定条件下将资源文件转换成 base64 编码，并将其嵌入到打包后的文件中，可避免请求资源时的额外开销。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75203