webpack5环境下puppeteer-core模块解析错误求助及替代方案咨询

问题背景 #

开发网页爬虫站点时，目标内容为动态加载，Cheerio无法满足需求，改用Puppeteer后出现一系列编译错误。

错误过程及已尝试的解决步骤 #

1. 初始模块缺失错误

Error: Can't resolve 'https' in '/Users/Documents/myMac/Study/bookMarks/node_modules/puppeteer-core/lib/cjs/puppeteer/node'
同时提示无法解析os、path等Node.js核心模块。

2. 配置webpack resolve.fallback
   使用yarn安装webpack及cli工具后，在webpack.config.js中添加配置：

resolve:{
    fallback:{
        "fs":false,
        "os": require.resolve("os-browserify/browser"),
        "path": require.resolve("path-browserify"),
        "https": require.resolve("https-browserify"),
        "stream": false,
        "zlib": false ,
        "crypto": false,
        "constants": false,
    }
}

配置依据webpack5官方提示：

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "https": false }
但执行yarn start时错误仍存在。

3. 验证配置有效性
   执行webpack --config webpack.config.js无编译错误，但yarn start问题依旧。

4. 安装依赖并配置package.json
   通过yarn安装fs、os、http等模块，package.json依赖包含：

"os": "^0.1.2",
"path": "^0.12.7"

同时添加browser字段配置：

"browser": {
  "crypto": false,
  "fs": false,
  "path": false,
  "os": false,
  "net": false,
  "stream": false,
  "tls": false
}

仍出现41个编译错误，例如：

ERROR in ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/FirefoxLauncher.js 43:29-42
Module not found: Error: Can't resolve 'fs' in '/Users/Documents/myMac/Study/bookMarks/node_modules/puppeteer-core/lib/cjs/puppeteer/node'

ERROR in ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/ProductLauncher.js 65:13-26
Module not found: Error: Can't resolve 'fs' in '/Users/Documents/myMac/Study/bookMarks/node_modules/puppeteer-core/lib/cjs/puppeteer/node'

webpack compiled with 41 errors

5. 清理重装依赖
   删除node_modules和yarn.lock，执行yarn cache clean && yarn install，重新安装puppeteer-core后问题未解决。

注：曾尝试将webpack配置中fallback改为fallbacks，但webpack5提示该选项不存在。

所用Puppeteer核心代码 #

const puppeteer = require('puppeteer-core');
const DomParser = require('dom-parser');

async function getTagList(url) {
  const tagListText = new Array();
  try{
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url);

    const html = await page.content();
    const parser = new DomParser();
    const dom = parser.parseFromString(html);
    const tagList = dom.getElementsByClassName('tag_area')[0].getElementsByTagName('a');
    tagListText = Array.from(tagList).map(tag => tag.textContent);

    await browser.close();
  }catch(error) {
    console.error(error);
  }

  return tagListText;
}

module.exports = { getTagList };

解决建议及替代方案 #

1. 调整架构：将爬虫逻辑移至后端
   Puppeteer本质是为Node.js环境设计的工具，不适合编译为浏览器端代码（会持续遇到Node.js核心模块缺失问题）。建议将爬虫逻辑封装为后端API，前端通过接口调用获取抓取结果，从根源避免环境不兼容问题。

2. 浏览器端动态内容抓取替代工具
   若必须在前端处理动态内容，可尝试以下方案：

• Axios + jsdom：用Axios请求页面原始HTML，再通过jsdom在前端模拟DOM环境解析内容，但对React/Vue等复杂单页应用的渲染支持有限。
• 无头浏览器服务：使用第三方无头浏览器服务，前端直接调用其API获取渲染后的页面内容，无需本地处理Puppeteer。

3. webpack配置额外尝试
   在webpack.config.js中添加废弃但部分场景仍生效的node配置：

node: {
  fs: 'empty',
  os: 'empty',
  path: 'empty',
  https: 'empty'
}

同时确保所有polyfill包已正确安装：

yarn add os-browserify path-browserify https-browserify stream-browserify

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