title: The CLI moved into a separate package: webpack-cli
body: <p>I'm new to React.js and I'm trying to learn from the tutorials on <a href="https://www.tutorialspoint.com/reactjs/index.htm" rel="noreferrer">tutorialspoint</a> but I faced error. Here is the error on console when I execute npm start command:</p>
  
  <pre><code>C:\Users\HP\Desktop\reactApp1&gt; npm start
  &gt; reactapp1@1.0.0 start C:\Users\HP\Desktop\reactApp1.
  &gt; 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.
  -&gt; When using npm: npm install webpack-cli -D 
  -&gt; 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•&lt;anonymous&gt; (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 
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>     {
        "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"
        }
      }
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>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;
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App.jsx';
  ReactDOM.render(&lt;App /&gt;, document.getElementById('app'));
  </code></pre>
  
  <p><strong>App.jsx</strong></p>
  
  <pre><code>import React from 'react';
  class App extends React.Component {
      render() {
          return (
              &lt;div&gt;
                  Hello World!!!
              &lt;/div&gt;
          );
      }
  }
  export default App;
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang = "en"&gt;
  &lt;head&gt;
      &lt;meta charset = "UTF-8"&gt;
      &lt;title&gt;React App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id = "app"&gt;&lt;/div&gt;
  &lt;script src = "index.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>