npm 包 yanrong-sunny-builder 使用教程

介绍

yanrong-sunny-builder 是一款基于 webpack 的前端构建工具，可以帮助开发者快速搭建项目，并提供多种插件和配置方案。

本文将详细介绍 yanrong-sunny-builder 的安装、配置和使用方法，并给出示例代码供读者参考。

安装

yanrong-sunny-builder 可以通过 npm 进行安装。在命令行中输入以下命令即可：

--- ------- --------------------- ----------

配置

基础配置

在项目根目录下新建一个 webpack.config.js 文件，填写如下内容：

----- ------------ - ---------------------------------

-------------- - --- --------------
  ------ --------------- -- ----
  ------- ------- -- ----
  ----------- ---- -- ---------
---

以上是一个最基础的 webpack 配置，我们可以在此基础上进行更多的配置。

插件配置

yanrong-sunny-builder 内置了多种插件，可以通过配置来启用这些插件。

HTML 插件

HTML 插件可以生成 HTML 文件，自动将打包后的 JS 和 CSS 引入到 HTML 中。

----- ------------ - ---------------------------------
----- ----------------- - -------------------------------

-------------- - --- --------------
  -- ---
  -------- -
    --- -------------------
      --------- -------------------- -- ---- ----
    ---
  --
---

CSS 插件

CSS 插件可以处理 CSS 文件，支持 LESS、Sass、PostCSS 等预处理器，并自动添加浏览器前缀。

----- ------------ - ---------------------------------
----- -------------------- - -----------------------------------
----- ------------------ - ----------------------------------------

-------------- - --- --------------
  -- ---
  -------- -
    --- ----------------------
      --------- -----------------------------
    ---
  --
  ------------- -
    ---------- ---- ----------------------
  --
---

图片插件

图片插件可以处理图片文件，并将小于设定阈值的图片转成 base64 编码。

----- ------------ - ---------------------------------

-------------- - --- --------------
  -- ---
  ------- -
    ------ -
      -
        ----- ----------------------
        ----- --------
        ------- -
          ----------------- -
            -------- ----- -- -- --- ------- ------ --
          --
        --
      --
    --
  --
---

高级配置

自定义 Loader

我们可以根据需要编写自己的 Loader，在 webpack 配置中引入即可。

----- ------------ - ---------------------------------

-------------- - --- --------------
  -- ---
  ------- -
    ------ -
      -
        ----- ---------
        ---- -
          -
            ------- -------------------
            -------- --- ------ ----- ----
          --
        --
      --
    --
  --
---

多页面应用

如果要构建多页面应用，可以在 entry 和 plugins 中分别配置多个入口和输出文件。

----- ------------ - ---------------------------------
----- ----------------- - -------------------------------

-------------- - --- --------------
  ------ -
    ------ ---------------
    ------ ---------------
  --
  ------- -
    --------- ----------------------------
    ----- -------
  --
  -------- -
    --- -------------------
      --------- --------------------
      ------- ---------- -- ------- -- --
      --------- ------------- -- -----
    ---
    --- -------------------
      --------- --------------------
      ------- ----------
      --------- -------------
    ---

----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------
阅读全文

猜你喜欢

  • npm 包 eslint-plugin-vuefix 使用教程

    介绍 在前端开发中，我们经常使用 ESLint 来规范代码风格和发现潜在的错误。而 eslint-plugin-vue 是一个官方提供的用于支持 Vue.js 的 ESLint 插件。

    6 年前
  • npm 包 ajv-i18n 使用教程

    简介 ajv-i18n 是一个针对 Ajv 数据验证器的国际化插件。它可以为 Ajv 提供多语言的错误提示信息，帮助开发者更加方便地进行数据校验。 在前端开发中，数据校验是一个非常重要的环节。

    6 年前
  • npm 包 require3 使用教程

    介绍 require3 是一个用于 Node.js 的模块，它提供了一些方便的方法，可以让你更加轻松地使用 require 语句加载模块。 相比于标准的 require 方法，require3 提供了...

    6 年前
  • 使用 Cabloy-NPM 包实现前端开发

    简介 CabloyJS 是一个基于 KoaJS、EggJS 和 VueJS 的全栈 JavaScript 框架，它提供了非常强大的后端开发能力。同时，它还提供了一套完整的前端解决方案 - Cabloy...

    6 年前
  • npm 包 jsonc-parser 使用教程

    简介 JSONC 是 JSON 的超集，具有注释和尾随逗号等功能。jsonc-parser 是一个 JavaScript 库，它可以解析 JSONC 并将其转换为普通的 JSON 格式。

    6 年前
  • npm 包 anywhere 使用教程

    简介 anywhere 是一个基于 Node.js 的静态文件服务器，可用于本地开发调试、展示页面等场景。使用 npm install anywhere -g 命令全局安装即可使用。

    6 年前
  • npm 包 instant-helios 使用教程

    什么是 instant-helios instant-helios 是一个使用 React 和 TypeScript 编写的可重用 UI 组件库，适用于 Web 应用程序开发。

    6 年前
  • npm 包 ghpages 使用教程

    简介 ghpages 是一个 NPM 包，可以将 Github 上的项目自动发布到 Github Pages 上，方便项目的展示与分享。其中，Github Pages 是 Github 提供的一项免费...

    6 年前
  • npm 包 webpack-glsl-loader 使用教程

    什么是 webpack-glsl-loader？ webpack-glsl-loader 是一款用于加载 GLSL 着色器代码的 webpack loader。它可以将 GLSL 代码转换为 Java...

    6 年前
  • 使用教程：aframe-ring-shader

    aframe-ring-shader 是一个用于 A-Frame 的自定义着色器，可以创建环形材质，并在其中显示图像或视频。本文将介绍如何使用这个着色器，并提供一些示例代码。

    6 年前
  • NPM 包 fs-extended 使用教程

    对于前端开发者来说，操作文件是一个常见的任务。这时就需要使用 Node.js 的文件系统模块（fs）来完成这些任务。但是，Node.js 提供的 fs 模块并不足以满足所有的需求。

    6 年前
  • npm 包 sfconsole 使用教程

    在前端开发过程中，我们经常需要查看浏览器的控制台日志以及调试输出。而 sfconsole 就是一个能够在命令行中打印浏览器控制台信息的 npm 包。本文将介绍 sfconsole 的使用方法，包括安装...

    6 年前
  • npm 包 sfpack 使用教程

    在前端开发中，我们常常需要使用一些第三方的 JavaScript 库或者工具来提高我们的开发效率，其中一个非常常用的工具就是 npm。而在众多的 npm 包中，sfpack 是一个值得我们关注的工具，...

    6 年前
  • npm 包 awesome-ejs-compiled-loader 使用教程

    在前端开发中，我们经常需要使用模板引擎来渲染视图。EJS 是一个简单易用的 JavaScript 模板引擎，它可以帮助我们快速生成 HTML、XML 和其他文本格式的文档。

    6 年前
  • npm 包 webpack-entrypoints-plugin 使用教程

    webpack-entrypoints-plugin 是一个实用的 npm 包，用于自动识别和创建 Webpack 的入口点（entry points）。本文将介绍这个包的详细使用方法，并提供示例代码...

    6 年前
  • npm 包 Packsuit 使用教程

    Packsuit 是一个基于 React 的 UI 库，它提供了许多可重用的组件和样式，可以帮助前端开发者快速构建现代化的 Web 应用程序。本文将介绍如何使用 Packsuit，并提供一些示例代码以...

    6 年前
  • npm 包 gulp-sfc-loader 使用教程

    在前端开发中，我们经常需要编写 Vue、React 或其它框架的单文件组件（SFC）。使用 webpack 编译这些单文件组件是非常方便的，但有时我们希望通过 gulp 等构建工具实现一些自定义处理。

    6 年前
  • npm 包 assert-html-equal 使用教程

    简介 assert-html-equal 是一个基于 Node.js 平台的 npm 包，用于比较两个 HTML 字符串是否相等。该包主要适用于前端项目中进行单元测试时对 HTML 片段的比较。

    6 年前
  • Inky 使用教程

    什么是 inky? Inky 是一个基于 Node.js 的命令行工具，用于将 HTML 内容转换为可在邮件客户端中渲染的响应式布局。它能够解决大多数电子邮件在移动设备上显示不一致的问题。

    6 年前
  • npm包 jsdoc3-parser 使用教程

    介绍 jsdoc3-parser 是一个基于 JSDoc 注释语法的 JavaScript 文档生成器，可以帮助前端开发者快速、准确地生成文档。本文将详细介绍如何使用该工具，并提供一些示例代码以帮助读...

    6 年前

相关推荐

    暂无文章