React项目执行npm run dev报错：缺少--devtool参数

嘿，我来帮你一步步解决这个问题，你遇到的报错主要是Webpack版本升级带来的参数和配置变化，还有旧版Babel和React 17不兼容的问题：

1. 先修复npm脚本的参数错误 #

你现在的dev脚本写的是webpack -wd，但Webpack CLI 4的参数格式已经变了：

• -d（也就是--devtool）现在必须指定具体的源映射类型，不能单独写；
• -w是--watch的简写，用来监听文件变化。

更简单的方式是直接用--mode development，Webpack会自动帮我们配置开发环境的最优设置，包括默认的devtool。修改package.json里的scripts：

"scripts": {
  "dev": "webpack --watch --mode development"
}

2. 更新Webpack配置文件的语法 #

Webpack 4及以上版本已经废弃了loaders字段，需要换成rules，同时loader的配置也要用use来声明：
修改你的webpack.config.js：

const path = require('path');
module.exports = {
  entry: './js/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    // 把原来的loaders替换成rules
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader' // 用use代替原来的loader字段
      }
    ]
  }
};

3. 升级Babel依赖以适配React 17 #

你用的babel-loader 6.x、babel-preset-es2015这些都是很老的版本，和React 17完全不兼容，得换成新版的@babel系列包：
首先卸载旧依赖：

npm uninstall babel-loader babel-preset-es2015 babel-preset-react

然后安装新版的开发依赖：

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

接着更新你的.babelrc文件，替换成新的preset：

{
  "presets": [
    "@babel/preset-env", // 替代旧的es2015，自动适配目标环境的ES语法
    "@babel/preset-react" // 支持React 17的JSX语法
  ]
}

4. 确认项目结构和HTML文件 #

别忘了你的项目根目录下要有public文件夹，里面放一个index.html，必须包含id为root的挂载节点：

<!DOCTYPE html>
<html>
<head>
  <title>My React App</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>

做完这些之后，重新运行npm run dev，应该就能正常编译并监听文件变化了！

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