背景介绍
webpack_ejs 是一个基于 webpack 和 ejs 的打包工具。通过 webpack_ejs，我们可以将多个 ejs 文件打包成为一个 HTML 文件，并可以引入 CSS 和 JS 文件。
安装
首先需要在项目中安装 webpack 和 webpack_ejs，可以通过 npm 安装：
npm install webpack webpack_ejs --save-dev
配置
在项目中新建 webpack.config.js 文件，配置如下：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ---------- - ----------------------- -------------- - - ----- ------------- ------ ----------------- ------- - ----- ----------------------- -------- --------- ----------- -- -------- - --- ------------ ------------- ------------------ --------- ------------- --------- -------------------- -------- ------------------- -- - --展开代码
webpack_ejs 提供了一个插件，可以在 plugins 中配置使用。plugins 中传入的是一个配置对象：
- templatePath：指定入口 ejs 文件路径（相对路径或绝对路径）；
- filename：指定输出 HTML 文件名；
- cssFiles：指定需要引入的 CSS 文件路径；
- jsFiles：指定需要引入的 JS 文件路径；
使用
在项目中使用 webpack_ejs，我们只需要在入口 ejs 文件中使用特定的语法，即可引入 CSS 和 JS 文件。具体语法如下：
-- -------------------- ---- ------- ---- -- --- --- -- -------------------------------- -- ----- ---------------- --------- ---- --- -- -- -- -- ---- -- -- --- -- ------------------------------- -- ------- -------- ---- ------------- -- -- --展开代码
示例代码
在项目中新建 index.ejs、style.css 和 script.js 文件。index.ejs 内容如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- --------------- -- -------------------------- -- -------------------------------- -- ----- ---------------- --------- ---- --- -- -- -- -- ------- ------ -------------------- -------------- -- - ---- ----- -- ------- --- -------- -- ------------------------------- -- ------- -------- ---- ------------- -- -- -- ------- -------展开代码
style.css 内容如下：
-- -------------------- ---- ------- ---- - ------- -- -------- -- ----------- -------- - -- - ----------- ----- ----------- ------- ------ ----- - - - ------- ----- ----------- ------- ------ ----- -展开代码
script.js 内容如下：
console.log('webpack_ejs');
打包
在项目根目录运行以下命令：
webpack打包完成后，会在项目中生成 dist 文件夹，其中包括一个 index.html 和 bundle.js 文件。
总结
通过以上步骤，我们可以轻松地将多个 ejs 文件打包成为一个 HTML 文件，并可以引入 CSS 和 JS 文件。同时，webpack_ejs 还支持多种配置选项，可以满足各种需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671048dd3466f61ffdc8a
