logo标签列表

CLI已移至单独的包：webpack-cli。

javascriptphpnode.jsreactjswebpack
20

我刚接触React.js，正在试着学习tutorialspoint上的教程，但是遇到了错误。当我运行npm start命令时，在控制台上会显示以下错误信息：

C:\Users\HP\Desktop\reactApp1> npm start
> reactapp1@1.0.0 start C:\Users\HP\Desktop\reactApp1.
> webpack-dev-server --hot

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:540
    throw err; 

Error: Cannot find module .webpack-cli/bin/config-yargs. 
    at Function.Module._resolveFilenam (module.js:538:15) 
    at Function.Module. load (module.j5:668:25) 
    at Module.require (module.js,587.17) 
    at require (internal/module.js:11:18) 
    at Object•<anonymous> (C:\Users\HP\Desktop\reactApp1\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1) 

    at Module. compile (module.js:663:30) 
    at Object.Module. extensions. .js (module.js:656:10) 
    at Module.load (module.js:556:32) 
    at tryModuleLoad (module.js:699:12) 
    at Function.Module. load (modul.js:691:3) 
  npm ERR! code ELIFECYCLE 
  npm ERR! errno 1 
  npm ERR! reactapp@1.0.0 start: `webpack-dev-server --hot`
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the reactapp@1.0.0 start 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\HP\AppData\Roaming\npm-cache\_logs\2018-03-06T05_29_08_833Z-debug.log

package.json

     {
      "name": "reactapp1",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "start": "webpack-dev-server --hot"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "babel-core": "^6.26.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "webpack": "^4.0.1",
        "webpack-dev-server": "^3.1.0"
      },
      "devDependencies": {
        "babel-loader": "^7.1.3"
      }
    }

webpack.config.js

var config = {
    entry: './main.js',
    output: {
        path:'./',
        filename: 'index.js',
    },
    devServer: {
        inline: true,
        port: 8090
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}
module.exports = config;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));

App.jsx

import React from 'react';
class App extends React.Component {
    render() {
        return (
            <div>
                Hello World!!!
            </div>
        );
    }
}
export default App;

首页.html

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
只需使用npm install --save-dev webpack@3.10.0，就可以将webpack降级到版本3。 - digit
9个回答
18

我做了同样的例子并遇到了同样的问题。所以按照上面的答案，我首先运行了这个命令 -

npm install -g webpack-cli --save-dev

什么都没发生，问题依旧存在。

然后我运行了这个命令 -

npm install webpack-cli --save-dev

问题已经解决，但我又遇到了另一个错误。

enter image description here

事实证明，在新的Webpack版本中，他们也改变了模块属性。因此，您还需要在webpack.config.js文件中进行更改。

module: {
        rules: [
          {
             test: /\.jsx?$/,
             exclude: /node_modules/,
             loader: 'babel-loader',
             query: {
                presets: ['es2015', 'react']
             }
          }
        ]
   }

所以基本上，在module对象内，loaders被rules所代替。
我进行了这个更改并且它对我有用。

enter image description here

希望这能帮助跟随本教程的其他人。
为了解决“无效配置对象”问题，我参考了这个答案。 https://dev59.com/GFgQ5IYBdhLWcg3wnVV3#42482079
如果我没记错的话，使用 -g 会全局安装包并忽略任何 --save 或 --save-dev 标志，这可能是你第一个命令无法工作的原因。 - kingdaro
非常感谢，你救了我的一天！！ - Madhu
15

在webpack 3中，Webpack本身和CLI是在同一个包中的，但在版本4中，他们将两者分开以更好地管理它们。

要解决您的问题，请像安装任何其他软件包一样，在命令行上运行npm install webpack-cli --save-dev来安装webpack-cli软件包，就像错误建议的那样。

你是否在当前目录下运行该命令，且该目录为你的项目文件夹？ - kingdaro
已安装了CLI和Webpack（npm install -g webpack）...仍然出现相同的错误，我在我的项目文件夹中... - Akhil Maripally
webpack和webpack-cli 都必须 以最新版本本地安装。 - kingdaro
@prakashkumar 你搞定了吗？我也有同样的问题。 - now_world
6

我曾经遇到过同样的问题，但是以上提供的解决方案都没有奏效。后来我尝试了全局和本地安装webpack-cli，这个方法有效。

npm install -g webpack-cli --save-dev

这对我很有帮助。至少足够执行webpack --mode development。
那么为什么这个可以运行...如果有人能告诉我，会很有帮助 :) 我的想法是...我从npm init开始在本地项目中创建一个包。我在这里安装了webpack和全局安装，因为我在看某个视频。当全局安装时，这告诉命令行这是我要引用的webpack。然而，当我安装webpack-cli时，我没有进行全局安装。所以在搜索它时，它会在全局node-modules中查找。对吗？ - Ben Holmquist
3

步骤1：首先运行

npm i webpack webpack-dev-server webpack-cli --save-dev

步骤2：装载程序被规则替换，因此更改webpack.config.j中的代码。让我们更改您的webpack.config.js文件：

var config = {
    entry: './main.js',
    output: {
        path:'./',
        filename: 'index.js',
    },
    devServer: {
        inline: true,
        port: 8090
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}
module.exports = config;

步骤3：现在进入您的package.json文件并对scripts选项进行一些更改：

"scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
},

步骤4：现在运行

npm start

在控制台中
事实上，第一次安装对我来说是避免全局webpack版本（之前已安装）与新项目的本地版本之间冲突的关键。虽然我认为这在“webpack”世界中是一个限制，但我很快就会通过docker找到解决方案。 - Carmine Tambascia
2
我用这个方法解决了问题。
npm i webpack-cli @webpack-cli/init

npx webpack-cli init

Hope to help 1

2

针对Webpack 4的解决方案 - 我希望它也适用于Webpack 2及以上版本

使用以下命令全局安装webpack-cli

npm i -g webpack-cli

所以您需要运行两个命令，一个用于本地，另一个用于全局安装CLI。

npm i -D webpack-cli
npm i -g webpack-cli

对我有效，希望对您也有效 :)

1
你需要安装webpack server，而不是webpack-cli。请查看这篇博客文章中的第二点。 尝试运行npm i -g webpack@2.2.1。
0
如果你想使用webpack-dev-server，你需要先安装webpack和webpack-cli。 webpack是一个存储编译器的模块，而webpack-cli则是运行它的命令行接口。否则，如果你更喜欢webpack-command，这是一个更轻量级的webpack-cli版本，你可能需要安装webpack和webpack-serve！
-1
错误控制台只是告诉您如何解决问题。似乎webpack模块依赖于webpack-cli模块。要解决此问题，只需运行命令npm install webpack-cli --save即可。它会正常工作。
真的吗！！它给你同样的错误吗？你能在node_modules文件夹中找到webpack-cli目录吗？ - Anadi Sharma
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接