HTML自动化打包中Pug模板转HTML的配置方案-html教程-PHP中文网

html-webpack-plugin 加载 .pug 文件需配置 pug-html-loader 或 pug-loader，推荐 pug-html-loader 并在 module.rules 中指定 options.data 传参，注意路径解析需统一用 webpack alias 避免 ci 环境报错。

html自动化打包中pug模板转html的配置方案

html-webpack-plugin 怎么加载 .pug 模板文件

默认情况下，html-webpack-plugin 不认识 .pug 文件，直接写 template: "src/index.pug" 会报错：Error: Cannot find module 'src/index.pug'。必须显式告诉它用哪个 loader 去处理。

推荐方式是通过 Webpack 的 module.rules 统一注册 pug-loader 或 pug-html-loader：

用 pug-loader：输出的是编译后的 HTML 字符串，适合配合 html-webpack-plugin 直接作为模板源
用 pug-html-loader：更轻量，专为 HTML 输出设计，支持 data 传参，且与 raw-loader 链式调用更自然
避免混用：项目里同时配了 pug-loader 和 pug-html-loader 容易因优先级冲突导致某类 .pug 文件被错误处理

pug-html-loader 和 pug-loader 的关键区别

pug-html-loader 是专为 html-webpack-plugin 场景优化的 loader，而 pug-loader 更偏向通用 JS 模块导入（比如 import html from "./tpl.pug"）。

两者在参数和行为上差异明显：

pug-html-loader 默认返回 HTML 字符串；pug-loader 默认返回一个函数（需调用才得 HTML），除非加 exportType: "string"
pug-html-loader 支持直接传入 data 对象，如 { data: { title: "首页" } }，模板内可直接用 #{title}
pug-loader 的 pretty 选项只影响开发时输出格式，不影响构建体积；pug-html-loader 默认不美化，加 pretty: true 会增大 HTML 文件体积
若模板中用了 include 或 extends，两个 loader 都能解析，但路径解析逻辑略有不同——pug-html-loader 更严格遵循 Webpack 的 resolve.alias 和 modules

模板里怎么传动态数据给 Pug

html-webpack-plugin 本身支持 templateParameters，但这个参数对 Pug 模板无效；真正起作用的是 loader 层的 data 配置。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

正确做法是在 Webpack rule 中指定 options.data：

module.exports = {
  module: {
    rules: [{
      test: /\.pug$/,
      use: [{
        loader: 'pug-html-loader',
        options: {
          data: {
            title: '后台管理系统',
            version: process.env.VERSION || '1.0.0'
          }
        }
      }]
    }]
  }
};

这样你在 src/index.pug 里就能直接写：title #{title} - v#{version}。注意：变量名不能含大写字母或特殊符号，否则 Pug 编译会失败。

环境变量建议提前注入，避免在模板里写 process.env.NODE_ENV —— Pug 不执行 JS，只做字符串替换
如果需要运行时动态数据（比如后端注入），应改用服务端渲染，Webpack 构建阶段无法获取
多个页面共用同一套数据？把 data 提到配置顶层，用 plugins 里多个 HtmlWebpackPlugin 实例分别指定 template 即可

为什么本地跑通了，CI 构建却报错 “Cannot resolve ‘./header.pug’”

这是最常踩的坑：Pug 的 include 路径在不同 loader 下解析规则不一致，尤其当 include 用相对路径（如 include ../layouts/header）时，pug-loader 和 pug-html-loader 对“当前目录”的认定可能不同。

根本原因是 Webpack 的 resolve.modules 和 resolve.alias 不会被 Pug 原生识别，必须靠 loader 显式桥接：

统一用绝对路径写法：include @/components/header，并在 Webpack 中配好 alias: { "@": path.resolve(__dirname, "src") }
禁用 Pug 自带的路径解析，强制走 Webpack：pug-html-loader 加 noPretty: true + resolve: false（部分版本支持）
CI 环境缺少 node_modules/pug？确保 pug 是 dependencies（不是 devDependencies），因为 pug-html-loader 运行时依赖它