介绍
yanrong-sunny-builder 是一款基于 webpack 的前端构建工具，可以帮助开发者快速搭建项目，并提供多种插件和配置方案。
本文将详细介绍 yanrong-sunny-builder 的安装、配置和使用方法，并给出示例代码供读者参考。
安装
yanrong-sunny-builder 可以通过 npm 进行安装。在命令行中输入以下命令即可：
npm install yanrong-sunny-builder --save-dev
配置
基础配置
在项目根目录下新建一个 webpack.config.js 文件，填写如下内容：
const SunnyBuilder = require('yanrong-sunny-builder');
module.exports = new SunnyBuilder({
entry: 'src/index.js', // 入口文件
output: 'dist', // 输出目录
publicPath: '/', // 静态资源的公共路径
});以上是一个最基础的 webpack 配置，我们可以在此基础上进行更多的配置。
插件配置
yanrong-sunny-builder 内置了多种插件，可以通过配置来启用这些插件。
HTML 插件
HTML 插件可以生成 HTML 文件，自动将打包后的 JS 和 CSS 引入到 HTML 中。
-- -------------------- ---- -------
----- ------------ - ---------------------------------
----- ----------------- - -------------------------------
-------------- - --- --------------
-- ---
-------- -
--- -------------------
--------- -------------------- -- ---- ----
---
--
---CSS 插件
CSS 插件可以处理 CSS 文件，支持 LESS、Sass、PostCSS 等预处理器，并自动添加浏览器前缀。
-- -------------------- ---- -------
----- ------------ - ---------------------------------
----- -------------------- - -----------------------------------
----- ------------------ - ----------------------------------------
-------------- - --- --------------
-- ---
-------- -
--- ----------------------
--------- -----------------------------
---
--
------------- -
---------- ---- ----------------------
--
---图片插件
图片插件可以处理图片文件，并将小于设定阈值的图片转成 base64 编码。
-- -------------------- ---- -------
----- ------------ - ---------------------------------
-------------- - --- --------------
-- ---
------- -
------ -
-
----- ----------------------
----- --------
------- -
----------------- -
-------- ----- -- -- --- ------- ------ --
--
--
--
--
--
---高级配置
自定义 Loader
我们可以根据需要编写自己的 Loader，在 webpack 配置中引入即可。
-- -------------------- ---- -------
----- ------------ - ---------------------------------
-------------- - --- --------------
-- ---
------- -
------ -
-
----- ---------
---- -
-
------- -------------------
-------- --- ------ ----- ----
--
--
--
--
--
---多页面应用
如果要构建多页面应用，可以在 entry 和 plugins 中分别配置多个入口和输出文件。
-- -------------------- ---- -------
----- ------------ - ---------------------------------
----- ----------------- - -------------------------------
-------------- - --- --------------
------ -
------ ---------------
------ ---------------
--
------- -
--------- ----------------------------
----- -------
--
-------- -
--- -------------------
--------- --------------------
------- ---------- -- ------- -- --
--------- ------------- -- -----
---
--- -------------------
--------- --------------------
------- ----------
--------- -------------
---
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------