在前端开发中，构建工具是必不可少的。而在构建工具中，Webpack 是我们使用最多的一种。但是，Webpack 的配置相对复杂，对初学者来说往往不易掌握。这时，我们可以通过使用 npm 包 @stating/builder 简化构建工具的配置，使整个构建过程变得更加简单方便。
什么是 @stating/builder
@stating/builder 是一个基于 Webpack 封装的构建工具，可以辅助开发者快速搭建 Webpack 配置并生成对应的构建结果。同时，它还提供了一些常用的功能模块，如 CSS 预处理器、自动添加 CSS 浏览器前缀、自动生成 HTML 文件、提取公共代码等等。这些功能都是经过实际项目检验并重新封装的，可以很好地满足我们的需求。
如何安装和使用 @stating/builder
- 首先，在项目根目录下执行以下命令来安装 @stating/builder：
npm install --save-dev @stating/builder
- 在项目根目录下新建一个名为
webpack.config.js的配置文件，内容如下：
const Builder = require('@stating/builder');
const builder = new Builder();
module.exports = builder.createConfig();- 执行以下命令即可开始构建项目：
npm run build
这样，我们就可以通过 @stating/builder 提供的默认配置来自动生成项目的构建结果。如果需要修改配置，可以通过传递参数来进行修改。比如，如果我们需要指定入口文件和出口文件，可以这样做：
-- -------------------- ---- -------
----- ------- - ----------------------------
----- ------- - --- ---------
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
---
-------------- - -----------------------@stating/builder 的工作原理
@stating/builder 的工作原理和 Webpack 类似，可以把整个构建流程看做是一条流水线，每个模块完成一项任务，最终生成构建结果。
@stating/builder 也分为多个模块，每个模块负责一项任务。其中，最核心的是 createConfig() 函数，它会根据传递的参数生成 Webpack 配置对象，并返回相应的配置。
在默认情况下，@stating/builder 自动生成的配置文件包括了以下几个核心模块：
entryModule：生成入口模块，outputModule：生成出口模块，babelModule：通过 Babel 处理 ES6+ 语法，styleModule：处理样式文件，并自动添加浏览器前缀，htmlModule：生成 HTML 页面。
同时，@stating/builder 还提供了一些额外的功能模块，如提取公共代码、优化构建结果等，可以根据实际需求进行添加和配置。
示例代码
-- -------------------- ---- -------
----- ------- - ----------------------------
----- ---- - ----------------
----- ------- - --- ---------
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
--
--
---
-------------- - -----------------------以上配置文件将样式文件中的 CSS 转换成 JS，并在 HTML 文件中自动添加 JS 文件引用。
指导意义
@stating/builder 解决了 Webpack 配置复杂的问题，使得开发者可以通过简单的配置即可完成一个完整的构建工具，无需花费大量时间和精力在 Webpack 上。
同时，@stating/builder 还提供了一些常用的功能模块，如 CSS 预处理器、自动添加 CSS 浏览器前缀、自动生成 HTML 文件、提取公共代码等等，这些功能模块都是实际项目中常用的。因此，通过学习和使用 @stating/builder，我们可以更好地应对实际项目中的构建需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559f581e8991b448d7a1f