简介
render-into-ejs-loader 是一个用于将 EJS 模板嵌入到已有 HTML 页面中的 webpack loader。使用此 loader，您可以将已有的 HTML 页面作为模板容器，在编译时将 EJS 文件中的数据渲染进去，生成新的 HTML 页面。
安装
使用 npm 安装 render-into-ejs-loader：
npm install render-into-ejs-loader --save-dev
使用
使用 render-into-ejs-loader，需要在 webpack 配置文件中添加一个规则，告诉 webpack 需要将哪些文件使用此 loader 进行处理。
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- -
-
------- -------------------------
-------- -
----- -
-- ---- -- -- ------ ---- --- ---------
-
-
-
-
-
-
-在这个配置示例中，我们告诉了 webpack，对所有文件名以 .ejs 结尾的文件使用 render-into-ejs-loader 进行处理。我们还指定了一些选项，其中包括一个 data 属性，此属性用于传递数据到 EJS 模板中。
示例
假设我们有一个文件名为 template.ejs 的 EJS 模板，它的内容如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------- ----- ---------- ------- ------ ---- --------------- ------- -------- -- ------------- ------- -------
这个模板具有两个 EJS 变量，分别为 title 和 js，它们将在编译时被替换为我们指定的值。
现在，我们有一个文件名为 index.html 的静态页面，它的内容如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------- ------- ----------- ------- ------ ---- --------------- ---- ---- -- ----- -- ---- -- ----- --- -------- --- ------- -------
我们想要将我们的 EJS 模板嵌入到 index.html 中，同时将 title 和 js 分别替换为 My Awesome App 和 bundle.js，代码如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------- ------- ----------- ------- ------ ---- --------------- -- ----------------------- -- ------- -------
现在，我们可以使用 render-into-ejs-loader 将我们的 EJS 模板嵌入到静态页面中。webpack 配置文件如下：
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- -
-
------- -------------------------
-------- -
----- -
------ --- ------- -----
--- -----------
-
-
-
-
-
-
-最终生成的结果如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------- ------- ----------- ------- ------ ---- --------------- --------- ----- ----- ---------- ------ ----- ---------------- --------- ------- ----------- ------- ------ ---- --------------- ------- ------------------------- ------- ------- ------- -------
指导意义
render-into-ejs-loader 相当于一个模板预编译工具，它可以将静态页面和动态模板组合在一起，生成最终的 HTML 页面。使用此工具可以简化前端项目的开发流程，使模板和数据的处理更加集中化和可管理化。
同时，使用此工具还可以将前后端分离的开发模式更加深入贯彻，前端开发人员可以专注于页面和模板的开发，不需要过多考虑数据处理和服务器端的业务逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566f581e8991b448e33d7