Webpack运行报错Require is not defined，新手项目配置问题求助

问题根源与解决方案 #

你遇到的Require is not defined错误核心原因是webpack配置的构建目标和项目实际运行环境不匹配：你当前配置把构建目标设置为了Node.js环境，但这是要在浏览器中运行的React前端项目，浏览器原生不支持Node.js的require语法，所以会抛出对应错误。

需修改的配置项如下： #

1. 修正webpack构建目标
   打开webpack配置文件，直接删除target:"node"这一行即可，webpack默认构建目标就是浏览器端，也可以手动改成target: "web"。

2. 修正devServer配置
   你使用的是4.x版本的webpack-dev-server，旧版的contentBase配置已经废弃，需要替换为static配置：
   把原配置中的

devServer: {
  contentBase: './dist'
},

修改为

devServer: {
  static: './dist'
},

3. 新增Babel配置文件
   你已经安装了babel相关的转译依赖，但还没有生效配置。在项目根目录新建名为babel.config.json的文件，写入以下内容：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

修改后完整webpack配置参考 #

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

const config = {
  entry: [
    'react-hot-loader/patch',
    './src/index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.jsx'
    ],
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },
  devServer: {
    static: './dist'
  }
};

module.exports = config;

所有配置修改完成后，重新执行npm run start启动项目即可正常运行。

内容的提问来源于stack exchange，提问作者H Nazmul Hassan