为何我的React项目webpack构建时提示缺少无需安装的模块？

核心错误原因 #

• 第一：webpack的resolve.fallback、mode这类配置不能直接写在package.json里，webpack默认只会读取项目根目录下的webpack.config.js文件里的配置，你放在package.json里的配置完全没生效，这就是你改了配置还是报错的根本原因。
• 第二：你在前端入口文件src/index.js里引入了express，express是Node.js服务端框架，本身就依赖大量Node.js原生模块，根本不能打包到前端运行的代码里，就算你把所有fallback都配完，后续也会有大量运行时错误。

具体修复步骤 #

第一步：拆分前后端代码 #

把服务端代码单独放到项目根目录的server文件夹下，命名为index.js，不要和前端的src目录混放，更不要在前端代码里引用任何服务端依赖。
确保你的前端src/index.js（或者jsx）里没有import express from 'express'或者const express = require('express')这类代码。

第二步：新增webpack.config.js配置文件 #

在项目根目录新建webpack.config.js，写入以下基础配置：

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

module.exports = {
  mode: 'development',
  entry: './src/index.js', // 换成你实际的前端入口文件路径，是jsx就改后缀
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    fallback: {
      "fs": false,
      "crypto": false,
      "zlib_bindings": false,
      "zlib": false,
      "stream": false,
      "url": false,
      "querystring": false,
      "http": false,
      "net": false,
      "buffer": require.resolve('buffer')
    }
  },
  plugins: [
    // buffer的polyfill需要配合全局注入插件使用
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    })
  ],
  module: {
    rules: [
      // 如果你用react需要加babel-loader的配置，这里可以根据你的需求补充
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env']
          }
        }
      }
    ]
  }
}

第三步：修正package.json的错误配置 #

删掉package.json里你自己加的resolve、mode字段，修改scripts字段：

{
  "scripts": {
    "start:client": "webpack serve --open",
    "build": "webpack",
    "start:server": "node server/index.js"
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "buffer": "^6.0.3",
    "compression": "^1.7.4",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "mysql": "^2.18.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "@babel/preset-react": "^7.16.0",
    "babel-loader": "^8.2.3",
    "webpack": "^5.62.1",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.4.0"
  }
}

之后安装补充的依赖：
npm install

第四步：启动项目 #

• 前端开发运行：npm run start:client
• 打包前端代码：npm run build
• 启动后端服务：npm run start:server

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