React项目Webpack配置报错：执行npm start时出现问题

Hey，我来帮你排查这个Webpack配置的问题，咱们一步步来：

1. 先检查Webpack版本和配置语法是否匹配 #

你的配置里用了module.loaders，这是Webpack 3及更早版本的写法。如果你的Webpack是4.x或5.x版本，这个写法就不兼容了，得改成rules，而且Webpack 4+要求必须加mode配置（选development或production）。修改后的配置可以参考下面：

var path = require("path");
var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
  mode: "development", // 开发环境用这个，生产环境换成"production"
  entry: SRC_DIR + "/app/index.js",
  output: {
    path: DIST_DIR + "/app",
    filename: "bundle.js",
    publicPath: "/app/"
  },
  module: {
    rules: [ // 把原来的loaders改成rules
      {
        test: /\.js?/,
        include: SRC_DIR,
        loader: "babel-loader",
        options: { // Webpack 4+更推荐用options代替原来的query
          presets: ["react", "es2015", "stage-2"]
        }
      }
    ]
  }
};
module.exports = config;

2. 确认所有依赖包都装对了 #

你的配置用到了一堆babel相关的工具，要是没装或者版本不对，肯定会报错。根据你的Webpack版本，选对应的命令安装：

如果你用的是Webpack 4.x： #

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader@7 babel-core babel-preset-react babel-preset-es2015 babel-preset-stage-2

小提醒：如果你想装新版的babel-loader（8+），那得换用@babel/core代替babel-core，而且es2015已经被废弃了，推荐用@babel/preset-env。这种情况下，你需要装这些包：

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

同时把presets改成["@babel/preset-react", "@babel/preset-env"]就行。

要是用的Webpack 3及更早版本： #

npm install --save-dev webpack webpack-dev-server babel-loader babel-core babel-preset-react babel-preset-es2015 babel-preset-stage-2

3. 看看package.json里的start脚本写对没 #

你执行npm start的时候，其实是跑的package.json里scripts字段的start命令，得确保这个命令是对的。比如：

{
  "scripts": {
    "start": "webpack-dev-server --open" // 启动开发服务器并打开浏览器
  }
}

要是你只是想直接打包，就写成：

{
  "scripts": {
    "start": "webpack"
  }
}

脚本写错了也会直接报错哦。

4. 检查入口文件路径是不是真的存在 #

确认一下src/app/index.js这个文件确实在你的项目里，路径拼写别错了——尤其是Linux和macOS系统要注意大小写，Windows虽然不区分，但最好还是统一写法。

5. 试试把Babel配置单独拎出来 #

你也可以把Babel的配置单独放到.babelrc文件里，这样Webpack配置更清爽，也不容易冲突。在项目根目录新建一个.babelrc文件，内容如下：

{
  "presets": ["react", "es2015", "stage-2"]
}

然后Webpack里的loader配置就可以简化成这样：

{
  test: /\.js?/,
  include: SRC_DIR,
  loader: "babel-loader"
}

要是按上面的步骤走还是有问题，你把具体的错误信息贴出来，我再帮你精准定位～

内容的提问来源于stack exchange，提问作者Vani.Ashireddy