Webpack构建React项目报错：ReferenceError: requrie is not defined

嘿，我帮你排查下这个问题，看起来主要是配置里的拼写错误+Webpack/Babel配置过时导致的，一步步来修复：

1. 先修正配置里的低级拼写错误 #

你的webpack.config.js里有两处明显笔误，这会直接导致Webpack运行异常：

• const path = requrie('path'); → 把requrie改成正确的require
• exclude: /mode_modules/ → 把mode_modules改成node_modules

2. 更新Webpack模块规则（适配Webpack 2+版本） #

从Webpack 2开始，module.loaders已经被废弃，官方推荐用module.rules；同时query参数也建议换成options来定义加载器配置。修正后的模块规则部分如下：

module: {
  rules: [
    {
      test: /\.js?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-react', '@babel/preset-env']
      }
    }
  ]
}

3. 安装正确的Babel依赖包 #

你之前用的react、env预设是旧版的（属于babel-preset-*系列），现在这些都迁移到@babel命名空间下了，需要安装最新的依赖：

npm install --save-dev @babel/core babel-loader @babel/preset-react @babel/preset-env

4. 整合后的完整webpack.config.js #

把所有修正点整合后，最终配置文件应该是这样：

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: { app: './src/main.js' },
  output: { 
    path: path.resolve(__dirname, 'build'), 
    filename: 'main.js' 
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-react', '@babel/preset-env']
        }
      }
    ]
  },
  target: 'web'
};

最后验证构建流程 #

• 确保你的src/main.js是标准React入口（比如用import引入React和ReactDOM，而不是require）
• 运行构建命令（比如package.json里的"build": "webpack --mode production"）
• 在HTML里正确引入打包后的build/main.js，确保是在浏览器环境加载（别在Node环境测试浏览器打包文件）

做完这些，require is not defined的错误应该就能解决了。

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