在React应用程序中运行npm run dev命令时出错

问题描述

我是React.js的新手，我正在尝试使用webpack在本地设置简单的React应用程序。 在运行npm run dev命令时，出现以下错误。

运行 npm run dev

后进入命令提示符错误

F:\ReactApp\react-webpack>npm run dev


> react-webpack@1.0.0 dev F:\ReactApp\react-webpack
> webpack -wd

error: option '-d,--devtool <value>' argument missing

npm ERR! code ELIFEcclE

npm ERR! errno 1

npm ERR! react-webpack@1.0.0 dev: `webpack -wd`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the react-webpack@1.0.0 dev script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR!     C:\Users\nilesh\AppData\Roaming\npm-cache\_logs\2020-10-30T08_33_31
_702Z-debug.log

下面是package.json文件中的代码

{
  "name": "react-webpack","version": "1.0.0","description": "","main": "webpack.config.js","dependencies": {
    "babel-loader": "^6.4.1","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1","react": "^17.0.1","react-dom": "^17.0.1","webpack": "^5.3.2","webpack-cli": "^4.1.0"
  },"devDependencies": {},"scripts": {
    "dev": "webpack -wd"
  },"author": "","license": "ISC"
}

下面是webpack.config.js文件的代码

const path = require('path');

module.exports = {
    entry : './js/app.js',output : {
        path: path.join(__dirname,'public'),filename: 'bundle.js'

    },module :{

        loaders: [
             {
                 test: /\.js$/,exclude: /node_modules/,loader:'babel-loader'
             }
        ]
    }
};

app.js文件中的代码

import React from "react";
import ReactDOM from "react-dom";

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}
ReactDOM.render(
  <HelloMessage name="Taylor" />,document.getElementById('root')
);
   

这是我的.babelrc文件

{
    "presets":[
        "react","es2015"
    ]
}

我已经安装了最新版本的node.js

预先感谢

Nilesh Kulkarni

解决方法

您必须使用-d devtools或通过放置

来指定devtool

module.exports = {
    ...
    devtool: 'source-map'
    ...
};

在您的webpack.config.js中。

如果您选择更改webpack.config.js文件，则不需要-d选项，如果您使用-d，则必须在后面指定一个参数，否则会引发错误。 / p>

,

如错误消息所述，您缺少-d（--devtool）参数的值。您可以在this list上找到有效值的列表。您可以将其直接添加到您的webpack配置中，如下所示：

module.exports = {
    ...
    devtool: 'source-map' // or any other valid value here
    ...
};

如果要使用值，则只需要在config中具有devtool的值，类似地，如果要通过CLI传递值，则只需要在CLI中使用-d参数。如果您不想使用devtool，请将其从webpack配置中删除，然后将dev脚本更改为webpack -w。但是，对于开发而言，您可能需要源映射，因此我建议使用devtool: 'source-map'（您仍然希望将开发脚本更改为webpack -w）。