介绍
ejs-parser-loader是一款读取ejs模板的webpack loader，它基于ejs模板引擎，能够将ejs模板文件转化为HTML文件。通过npm包ejs-parser-loader，我们可以更加方便地进行前端开发。
安装
在使用前需要先安装ejs-parser-loader，你可以使用npm或者yarn进行安装：
npm install ejs-parser-loader -D
或者
yarn add ejs-parser-loader --dev
使用方法
在webpack配置文件中，配置ejs-parser-loader。
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -------------------
-
-
-
-然后在项目中通过import或者require引入ejs模板。
import template from './template.ejs'; // ...使用template
也可以在html中使用ejs模板。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------
-------
------
------- --------------- --------------
-- ------- ----------------------- --
------- ------- -------
-- - --
---------
--------
--- ---- - ------- ------ -------
--- -------- - ----------------------------------------------
--- ------ - ----------------------
--- ------ - -------------
-- -----------
---------
-------
-------参数
你可以通过ejs-parser-loader向ejs模板传递参数。
-- -------------------- ---- ------- ------ -------- ---- ----------------- ----- ---- - - ----- ------ ---- -- -- ----- ------ - ---------- ---- --- -- -----------
也可以在webpack配置文件中设置ejs参数。
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
--------------------
-
------- --------------------
-------- -
--------- --------- - ----------------
----- -
----- ------
---- --
-
-
-
-
-
-
-
-在webpack配置文件中，使用ejs-render-loader将参数传递给ejs模板。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------
-------
------
------- --------------- --------------
--------- --- ---- --------
------ --- --- --- -- ----- --------
---------
--------
------ -------- ---- -----------------
----- ---- - -
----- ------
---- --
--
----- ------ - ---------- ---- ---
----------------------- - -------
---------
-------
-------
总结
ejs-parser-loader可以使我们更加方便地使用ejs模板，提高了前端开发效率。在使用ejs模板时，我们可以通过ejs-parser-loader传递参数，方便我们对模板的定制化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bdd81e8991b448d984b