npm start 给出 webpack cli 错误 React.js
npm start is giving webpack cli error with React.js
我刚开始从这个网站 tutorailspoint and React.js 学习 react.js。
当我 运行 这个命令 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)
安装后
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
安装后我的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"
}
}
我认为你应该安装 webpack-cli:
npm i -D webpack-cli
因为你是基于一篇没有指定 webpack 版本的旧文章,看起来你是 运行 较新版本的 webpack 相对于具有旧版本 webpack 配置的旧代码库。
您有 2 个选择:
- 回滚到正确的 webpack 版本,该版本将与您的 webpack 配置一起使用,而不要求您安装 CLI。
- 使用最新的 webpack 版本,安装 CLI 和其他任何必要的东西,并将你的 webpack 配置更新到最新的 API。
我还建议您寻找更好的更新 post。
您收到的错误告诉您 "The CLI moved into a separate package: webpack-cli."。看起来您正在关注的教程是从 webpack
软件包也随 CLI 一起提供的时候开始的。您必须使用较新的版本单独安装它。
npm i -D webpack-cli
你的第二个错误来自于 Webpack 曾经在 configuration.module.loaders
中定义了加载程序,但它已经更改为 configuration.module.rules
。
webpack.config.js
var config = {
// ...
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ["es2015", "react"]
}
}
]
}
};
module.exports = config;
我刚开始从这个网站 tutorailspoint and React.js 学习 react.js。
当我 运行 这个命令 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)
安装后
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
安装后我的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"
}
}
我认为你应该安装 webpack-cli:
npm i -D webpack-cli
因为你是基于一篇没有指定 webpack 版本的旧文章,看起来你是 运行 较新版本的 webpack 相对于具有旧版本 webpack 配置的旧代码库。 您有 2 个选择:
- 回滚到正确的 webpack 版本,该版本将与您的 webpack 配置一起使用,而不要求您安装 CLI。
- 使用最新的 webpack 版本,安装 CLI 和其他任何必要的东西,并将你的 webpack 配置更新到最新的 API。
我还建议您寻找更好的更新 post。
您收到的错误告诉您 "The CLI moved into a separate package: webpack-cli."。看起来您正在关注的教程是从 webpack
软件包也随 CLI 一起提供的时候开始的。您必须使用较新的版本单独安装它。
npm i -D webpack-cli
你的第二个错误来自于 Webpack 曾经在 configuration.module.loaders
中定义了加载程序,但它已经更改为 configuration.module.rules
。
webpack.config.js
var config = {
// ...
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ["es2015", "react"]
}
}
]
}
};
module.exports = config;