npm 包 webpack-iconfont-plugin-nodejs 使用教程

阅读时长 16 分钟读完

前言

随着前端开发的不断发展,越来越多的项目需要使用 iconfont 来实现图标的展示。针对这个需求,有很多开源的工具包来支持前端开发人员完成 iconfont 在项目中的使用。其中 webpack-iconfont-plugin-nodejs 就是一个非常优秀的 npm 包,能够帮助开发人员轻松使用 iconfont。

简介

webpack-iconfont-plugin-nodejs 是一个 webpack 插件,可以将 iconfont 抽离出来为单独的文件,方便项目的开发和维护。支持将字体文件、css 文件和 html 文件单独抽离出来。它支持自动生成多种格式的字体文件和 css 文件,满足各种需求。

安装

使用 npm 安装:

使用方法

1. 配置 webpack 插件

在 webpack 配置文件中添加如下代码:

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

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

其中的参数说明:

  • src:iconfont 所在的文件夹路径
  • family:iconfont 的 family 名称
  • dest:输出的字体文件、css 文件和 html 文件路径
  • watch:启用增量编译配置
  • cssTemplate:css 模板文件路径
  • formats:支持输出的格式
  • fontHeight:font height
  • descent:font descent

2. 在项目中使用

在 html 文件或 css 样式表中使用 iconfont:

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

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

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

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

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

3. 增量编译

采用增量编译,可以对比前后两次编译所执行的操作,只编译修改过的文件,从而开启增量编译。

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

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

其中:

  • pattern:需要监控的文件路径模式,支持 glob patterns。
  • cwd:监控的文件夹路径。

4. css 模板

默认情况下,webpack-iconfont-plugin-nodejs 生成的 css 文件可能不满足我们的实际使用需求。因此,我们可以自定义一个 css 模板文件,并在 webpack 配置文件中配置。

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

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

其中:

  • {{family}} 表示 iconfont 的 family 名称;
  • {{font}} 表示字体文件的路径;
  • {{#icons}}...{{/icons}} 表示循环所有的 icon。

**注:**我们需要安装 nunjucks 模板引擎包,并在 webpack 配置文件中使用。

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

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

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

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

5. iconfont 文件处理

webpack-iconfont-plugin-nodejs 默认支持处理 svg 格式的 iconfont 文件,我们还可以通过配置 loaders 来支持处理其他格式的 iconfont 文件,例如 woff、woff2 等。

需要注意的是,在配置 svg-loader 的过程中,由于增量编译会对文件进行缓存,当文件内容没有发生变化时,增量编译不会再次执行 svg-loader,这样就会导致生成的 hash 值不正确。为了解决这个问题,我们可以安装一下 hash-sum 包并对 svg 文件进行 hash 操作。

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

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

示例代码

  • iconfont 的 svg 文件:
  • webpack 配置文件:
-- -------------------- ---- -------
----- -------------- - ------------------------------------------
----- ---- - ----------------
----- -------- - --------------------
----- ------- - --------------------

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

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

--------------------------------
  • html 文件:
-- -------------------- ---- -------
--------- -----
------
------
    ----- ----------------
    -----------------------
    ----- ---------------- ------------------------------------------
-------
------
    -- --------------- ---------------
    -- --------------- ------------------
    -- --------------- ----------------
-------
-------
  • css 样式表:
-- -------------------- ---- -------
---------- -
    ------------ -----------
    ---- --------------------------------------
    ---- -------------------------------------------- ----------------------------
         --------------------------------------- ----------------
         -------------------------------------- ---------------
         ------------------------------------- -------------------
         ---------------------------------------------- --------------
    ------------ -------
    ----------- -------
-

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

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

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

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

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedb141b5cbfe1ea06110ff

纠错
反馈