如何修复 Webpack 和 Babel 的“require is not defined”错误？

Question

我不断收到错误Uncaught ReferenceError: require is not defined in browser even with Webpack和Babel 。 出于某种原因，我以前从未担心过这个问题。 我不确定这个错误是由更新的软件包还是什么引起的。 为了简单起见，我设置了一个非常简单的测试应用程序。 package.json

{
   "name": "require-test",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "engines": {
      "node": "16.16.0"
   },
   "scripts": {
      "build": "webpack --config webpack.config.js"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
      "@babel/core": "^7.18.10",
      "@babel/preset-env": "^7.18.10",
      "babel-loader": "^8.2.5",
      "webpack": "^5.74.0",
      "webpack-cli": "^4.10.0"
   }
}

webpack.config.js

const path = require('path');

module.exports = {
   target: "node",
   mode: "production",
   output: {
      path: path.resolve(__dirname, 'dist'),
      clean: true,
      filename: (pathData) => {
         return 'index.js'
      },
   },
   module: {
      rules: [
         {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
               loader: 'babel-loader',
               options: {
                  presets: ['@babel/preset-env']
               }
            }
         }
      ]
   }
}

src/index.js （构建前的 js 文件）

const path = require('path');

console.log(path);

dist/index.js （构建后的js文件）

(()=>{var r,e={17:r=>{"use strict";r.exports=require("path")}},t={};r=function r(o){var s=t[o];if(void 0!==s)return s.exports;var p=t[o]={exports:{}};return e[o](p,p.exports,r),p.exports}(17),console.log(r)})();

Answer 1

您的代码有几处需要更改。 首先，当您在浏览器上运行错误的代码时，您不能以构建node为target 。 其次， path是专门为在节点服务器上运行而设计和构建的，但是，在浏览器上有一个后备路径，称为path-browserify 。 您可以查看其文档以了解其工作原理。

无论如何总结一下，最后你需要切换target为web ：

module.exports = {
 target: "web",
 // ...
}