简介
ejs-webpack-plugin 是一个基于 webpack 的插件，它可以在打包过程中把指定的 ejs 模板文件编译成最终的 HTML 文件，并自动注入到输出的文件中。
安装
通过 npm 安装：
npm install ejs-webpack-plugin --save-dev
配置
在 webpack 的配置文件中添加以下代码：
-- -------------------- ---- -------
----- ---------------- - ------------------------------
-------------- - -
-- ---
-------- -
--- ------------------
--------- -------------
--------- ------------------
-- --
------ --- -----
----- -
--------- -------------------- -----------------
--
---
--
-- ---
--上面的配置中，filename 和 template 分别指定最终生成的 HTML 文件名和使用的 ejs 模板文件路径。其中，template 可以是相对于当前配置文件的路径或绝对路径。
title 和 meta 是可选的参数。它们可以在 ejs 模板文件中通过 htmlWebpackPlugin.options 对象来访问。例如：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ------------------------------- ----------
----- --------------- ------------ --------------------------------------- ----
-------
------
---- ---------------
-------
-------上面的代码中，htmlWebpackPlugin.options.title 和 htmlWebpackPlugin.options.meta.viewport 分别对应上面配置的 title 和 meta。
示例
以下是一个简单的示例，演示如何使用 ejs-webpack-plugin 生成一个含有变量和循环的 HTML 文件。
1. 安装依赖
创建一个新的 npm 项目，并安装 ejs 和 ejs-webpack-plugin：
mkdir my-app cd my-app npm init -y npm install ejs ejs-webpack-plugin --save-dev
2. 创建模板文件
在项目根目录下创建模板文件 index.ejs：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ----- ----------
-------
------
----
-- --- ---- - - -- - - ------------- ---- - --
------- -------- -------
-- - --
-----
-------
-------上面的代码中，使用 <% %> 和 <%= %> 来表示代码块和变量。其中，title 和 items 是 ejs 模板文件中的变量名。
3. 配置 webpack
在项目根目录下创建 webpack 配置文件 webpack.config.js：
-- -------------------- ---- -------
----- ---------------- - ------------------------------
-------------- - -
------ -----------------
------- -
--------- ----------
--
-------- -
--- ------------------
--------- -------------
--------- --------------
------ --- -----
----- -
--------- -------------------- -----------------
--
---
--
--上面的代码中定义了入口文件 index.js 和输出文件名 main.js，并指定了使用的 ejs 模板文件 index.ejs，并传递了两个变量 title 和 items。
4. 打包并查看结果
在控制台执行以下命令：
npx webpack
然后在浏览器中打开 index.html 文件，应该可以看到生成的 HTML 内容，其中列表中包含了 ejs 模板文件中定义的 items 数组中的元素。
结语
本篇文章详细介绍了如何使用 ejs-webpack-plugin npm 包将 ejs 模板文件编译成 HTML 文件，并注入到输出文件中。通过本文提供的示例和配置参数，可以让读者更好地了解该插件的使用方法和相关技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005516481e8991b448ce933