运行npm start时webpack --devtool参数缺失报错的解决方法

错误原因 #

Webpack 5已废弃-d（开发模式）和-p（生产模式）这两个旧命令行参数，你当前使用的Webpack 5+版本不再支持这些参数，运行webpack -d时触发该报错。

修复步骤 #

1. 更新package.json的scripts命令

将原命令中的-d/-p替换为--mode development/--mode production，同时调整webpack-dev-server的过时参数（--content-base已改为--static，--inline/--hot在新版本中默认启用，可按需保留）：

修改后的scripts部分：

"scripts": {
  "start": "npm run build",
  "build": "webpack --mode development && cp src/index.html dist/index.html && webpack-dev-server --static src/",
  "build:prod": "webpack --mode production && cp src/index.html dist/index.html"
}

2. 修正webpack.config.js的过时配置

Webpack 2+版本中，配置项有以下变更：

• modules → module
• loaders → rules
• debug选项已被移除（mode配置已包含调试相关逻辑）
• query → options（babel-loader参数写法更新）

修改后的webpack.config.js：

import webpack from 'webpack';
import { resolve } from 'path';

const DIST_DIR = resolve(__dirname, "dist");
const SRC_DIR = resolve(__dirname, "src");

const config = {
    mode: 'development',
    devtool: 'source-map',
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR + "/app",
        filename: "bundle.js",
        publicPath: "/app/"
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                include: SRC_DIR,
                use: "babel-loader",
                options: {
                    presets: ["react", "es2015", "stage-2"]
                }
            }
        ]
    }
};

export default config;

额外提示 #

若后续出现babel相关报错，需注意：babel-loader@9依赖@babel/core@7+，而你当前使用的babel-preset-es2015等是旧版preset，建议迁移至@babel/preset-env、@babel/preset-react以兼容新版本babel。

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