Webpack打包后浏览器报Uncaught ReferenceError: require未定义求助

你在浏览器中运行Webpack打包代码时遇到Uncaught ReferenceError: require is not defined错误，报错指向external node-commonjs "url":1，核心原因是你的Webpack配置针对Node.js环境而非浏览器环境，导致打包产物保留了Node专属的模块加载机制。

问题根源拆解 #

你的Webpack配置里有两个关键错误：

• target: "node"：强制Webpack按照Node.js环境打包，保留了require这类Node专属的模块加载语法，而浏览器原生不支持
• externalsPresets: { node: true }：将Node.js内置模块（比如url）标记为外部依赖不打包，浏览器中没有这些模块，自然会报错

修复步骤 #

1. 调整Webpack的target配置 #

将target: "node"改为target: "web"（或直接删除该配置，因为Webpack默认target就是web），让Webpack生成浏览器兼容的代码。

2. 移除Node环境的externalsPresets #

删除externalsPresets: { node: true }配置，避免Node内置模块被排除在打包流程外。

3. 添加Node内置模块的Polyfill #

由于barchart-dot-com可能依赖Node.js内置模块（比如url），需要用node-polyfill-webpack-plugin为浏览器提供这些模块的兼容实现（你的package.json已安装该插件）。

修改后的完整Webpack配置 #

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const NodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin');

module.exports = {
  mode: "development",
  entry: {
    home: path.resolve("C:/Desktop/Ticqer", "src/js/home.js"),
    ticker: path.resolve("C:/Desktop/Ticqer", "src/js/ticker.js"),
  },
  output: {
    path: path.resolve("C:/Desktop/Ticqer", "dist"),
    assetModuleFilename: "[name][ext]",
    filename: "[name][contenthash].js",
    clean: true,
  },
  plugins: [
    new NodePolyfillWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "Ticqer",
      filename: "homepage.html",
      template: "src/home_template.html",
      chunks: ["home"],
      scriptLoading: "defer",
    }),
    new HtmlWebpackPlugin({
      title: "Ticqer",
      filename: "ticker.html",
      template: "src/ticker_template.html",
      chunks: ["ticker"],
      scriptLoading: "defer",
    }),
  ],
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|svg|jpg|ico)$/i,
        type: "asset/resource",
      },
    ],
  },
  stats: {
    errorDetails: true,
  },
};

收尾检查 #

1. 重新执行npm run build打包项目
2. 打开dist目录下的ticker.html页面，确认错误消失

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