web-dev-qa-db-ja.com

CLIは別のパッケージに移動しました：webpack-cli

私はReact.jsを初めて使い、 tutorialspoint のチュートリアルから学ぼうとしていますが、エラーに直面しました。 npm startコマンドを実行すると、コンソールにエラーが表示されます。

C:\Users\HP\Desktop\reactApp1> npm start
> [email protected] 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! [email protected] start: `webpack-dev-server --hot`
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the [email protected] 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;

index.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>
javascriptphpnode.jsreactjswebpack
16
prakash kumar

私は同じ例を経験し、同じ問題に直面しました。したがって、上記の回答に従って、最初にこのコマンドを実行しました-

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']
             }
          }
        ]
   }

したがって、基本的にloadersはmoduleオブジェクト内でrulesに置き換えられます。

私はこの変更を行い、それは私のために働いた。

enter image description here

このチュートリアルをフォローしている他の人に役立つことを願っています。

Invalid configuration objectの問題を解決するために、この回答を参照しました。 https://stackoverflow.com/a/42482079/589255

16
Rito

Webpack 3では、webpack自体とそのCLIは同じパッケージに含まれていましたが、バージョン4では、それぞれをより適切に管理するために2つを分離しました。

問題を解決するには、他のパッケージと同様に、コマンドラインでnpm install webpack-cli --save-devを実行して、エラーが示すようにwebpack-cliパッケージをインストールします。

13
kingdaro

同じ問題を抱えていて、上記の解決策では運がありませんでした-webpack-cliをローカルだけでなくグローバルにインストールしてみましたが、これはうまくいきました。

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

これは私のためにそれを修正しました。少なくともwebpack --mode development.を実行するのに十分

6
Ben Holmquist

Webpack 4で解決済み-webpack 2以降で動作することを望みます

このコマンドを使用してwebpack-cliもグローバルにインストールします

npm i -g webpack-cli

そのため、合計で次の2つのコマンドを実行する必要があります。1つはローカル用、もう1つはCLIをグローバルにインストールするためです。

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

それは私のために働くそれはあなたのためにも働くことを願っています:)

2
Sabir Hussain

Step1：最初の実行

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

Step2：ローダーはルールに置き換えられるため、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;

Step3：ここでpackage.jsonファイルに移動し、スクリプトオプションにいくつかの変更を加えます。

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

Step4：今すぐ実行

npm start

コンソールで

1
sachin bhandari

Webpack-cliではなく、webpackサーバーをインストールする必要があります。 このブログ投稿 の2番目のポイントをご覧ください。 npm i -g [email protected]を試してください。

1
Abel Condori Malmaceda

これで問題を解決しました。

npm i webpack-cli @webpack-cli/init

npx webpack-cli init

助けてほしい 1

1
user9668868

エラーコンソールは、単に問題の解決方法を示しています。 webpackモジュールはwebpack-cliモジュールに依存しているようです。この問題を解決するには、npm install webpack-cli --saveコマンドを実行するだけです。それはちょうどうまくいくでしょう。

0
Anadi Sharma

webpack-dev-serverを使用する場合は、webpackおよびwebpack-cliを最初にインストールする必要があります。 webpackはコンパイラを格納するモジュールであり、webpack-cliはそれを実行するコマンドラインインターフェイスです。それ以外の場合、webpack-commandのはるかに軽量なバージョンであるwebpack-cliを希望する場合は、webpackおよびwebpack-serveをインストールする必要があります。

0
Clite Tailor