[英]npm start is giving webpack cli error with React.js
I have just started learning react.js from this site tutorailspoint and React.js .我刚刚开始从这个网站tutorialailspoint 和 React.js学习react.js 。
After following all the setup information when I run this command npm start
this give the error below:在我运行此命令
npm start
时遵循所有设置信息后,出现以下错误:
C:\Users\USER\Desktop\reactapp>npm start
> reactapp@0.0.1 start C:\Users\USER\Desktop\reactapp
> webpack-dev-server.cmd --content-base app
The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
module.js:442
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
at Function.Module._resolveFilename (module.js:440:15)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\Users\USER\Desktop\reactapp\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
After installing安装后
C:\Users\USER\Desktop\reactapp>npm start
> reactapp@0.0.1 start C:\Users\USER\Desktop\reactapp
> webpack-dev-server --hot
× 「wds」: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module has an unknown property 'loaders'. These properties are valid:
object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
-> Options affecting the normal modules (`NormalModuleFactory`).
npm ERR! Windows_NT 10.0.17134
My package.json after installing:安装后我的 package.json:
{
"name": "reactapp",
"version": "0.0.1",
"description": "first test",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
"webpack": "^4.16.5",
"webpack-dev-server": "^3.1.5"
},
"devDependencies": {
"webpack-cli": "^3.1.0"
}
}
Because you are based on an old article that didn't specify the webpack version, it seems you are running a newer version of webpack against an old codebase with previous version webpack config.因为您基于未指定 webpack 版本的旧文章,所以您似乎正在针对具有旧版本 webpack 配置的旧代码库运行更新版本的 webpack。 You have 2 choices:
您有 2 个选择:
I also suggest you look for a better updated post.我还建议您寻找更好的更新帖子。
The error you get tells you that "The CLI moved into a separate package: webpack-cli.".你得到的错误告诉你“CLI 移动到一个单独的包:webpack-cli。”。 It seems like the tutorial you are following is from when the
webpack
package came with the CLI as well.您所遵循的教程似乎也来自 CLI 附带的
webpack
包。 You have to install that separately with newer versions.您必须使用较新的版本单独安装它。
npm i -D webpack-cli
You second error comes from that Webpack used to have the loaders defined in configuration.module.loaders
, but it has since changed to configuration.module.rules
.您的第二个错误来自 Webpack 曾经在
configuration.module.loaders
定义加载器,但它已更改为configuration.module.rules
。
webpack.config.js webpack.config.js
var config = {
// ...
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ["es2015", "react"]
}
}
]
}
};
module.exports = config;
我认为你应该安装 webpack-cli: npm i -D webpack-cli
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.