使用Webpack无法从Pug文件提取HTML/CSS/JS及图片问题排查

一、"Core..." 错误排查（含YAML前置元数据场景） #

• PugPlugin 解析YAML前置元数据依赖 front-matter 包，先确认是否安装：

  npm install front-matter --save-dev
  

• 检查Pug文件的YAML元数据格式，必须用---包裹，示例：

  ---
  title: 首页
  layout: base
  ---
  html
    head
      title= title
    body
      h1 测试页面
  

• 确保webpack配置中PugPlugin开启元数据解析：

  const PugPlugin = require('pug-plugin');
  
  module.exports = {
    plugins: [
      new PugPlugin({
        extractMetadata: true, // 开启后才能解析YAML元数据
        js: { filename: 'js/[name].js' },
        css: { filename: 'css/[name].css' },
      }),
    ],
    entry: { index: './src/index.pug' },
  };
  

二、移除元数据后仍无法提取资源的排查点 #

• 核对webpack入口路径：必须指向Pug文件，路径要相对项目根目录，避免拼写错误
• 确认PugPlugin的输出配置：必须明确指定js、css的输出路径，否则资源无法被提取
• 版本兼容性调整：node v14.15.4 不兼容PugPlugin 5.x+版本，需安装适配版本：

  npm install pug-plugin@4.2.0 --save-dev
  

• 禁用冲突插件：不要同时使用HtmlWebpackPlugin和PugPlugin，二者会干扰资源提取逻辑
• 查看详细日志：执行 npm run build --verbose 获取完整错误信息，"Core..."错误多为核心依赖加载失败或版本不匹配

三、最小化验证步骤 #

1. 新建极简测试项目：创建src/index.pug写基础Pug代码，webpack.config.js只保留PugPlugin和基础配置
2. 执行npm run build，确认是否能正常生成资源
3. 逐步添加YAML元数据、其他配置，定位具体问题点

内容的提问来源于stack exchange，提问作者Salvatore Riccardi