简介
moky-webpack 是一个基于 webpack 的前端构建工具。它利用了 webpack 的强大功能，使得前端开发、代码打包部署更加轻松。此外，它还提供了一些独有的特点，如：
- 支持多种静态资源处理
- 支持多种发布环境配置，并且配置清晰简单
- 使用了可插拔的插件体系，灵活扩展
安装
moky-webpack 可以通过 npm 安装，我们先来安装一下它：
npm install moky-webpack --save-dev
基本配置
完成安装后，我们可以简单配置一下 moky-webpack，让它可以正确打包我们的项目。
在你的项目跟路径下新建一个 webpack.config.js 文件，填写以下内容：
-- -------------------- ---- -------
----- ----------- - ------------------------
-------------- - --- -------------
------ -----------------
------- -
----- --------- - --------
--------- ---------
--
---以上代码，我们将 moky-webpack 引入到配置文件中，创建一个新的构建实例。配置 entry 和 output 参数，即项目入口和输出路径、文件名。
现在，可以在命令行中执行 npx webpack，moky-webpack 就会开始打包项目代码，生成 output 路径下的 app.js 文件。
高级功能
处理 css 文件
moky-webpack 内置了处理 css 的功能。当项目中需要使用 css 文件时，我们可以通过配置实现 css 的加载和打包。
首先，安装需要使用的 npm 包：
npm install css-loader style-loader --save-dev
在 moky-webpack 配置文件中，添加对 css 文件的处理规则：
-- -------------------- ---- -------
-------------- - --- -------------
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
--
--
---现在我们在入口文件中 import 一个 css 文件，再次执行 webpack 命令，就会发现 css 文件已经被正确处理了。
import './common.css';
处理图片文件
图片文件是前端项目中必不可少的一部分。下面我们来讲解一下如何在 moky-webpack 中处理图片文件。
同样的，我们需要安装需要使用的 npm 包：
npm install file-loader --save-dev
添加图片文件处理规则：
-- -------------------- ---- -------
-------------- - --- -------------
------- -
------ -
-
----- ----------------------
---- -
-
------- --------------
-------- -
----------- ---------
--
--
--
--
--
--
---这里用到了 file-loader，当 webpack 找到一个满足图片文件规则的文件时，就会通过 file-loader 将其转换为输出路径下的对应图片文件，并且可以通过 options 配置生成命名规则。
现在，在项目代码中使用图片就可以愉快的玩耍了。
import img from './demo.png';
总结
moky-webpack 是一个强大的前端构建工具，它通过内置的模块化工具、插件体系以及指导性的配置，简化了前端开发和部署的流程，让前端开发人员能够更专注于业务逻辑的实现。
在实际开发中，可能还需要和其他插件如 babel、sass、postcss 等一起使用，可以结合官方文档和自己的实际需求进行配置和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562b381e8991b448dff30