Can't start webpack development server

Question

I am new on es6. I followed a blog Beginner's Guide To Setup ES6 Development Environment. I completed all of the process step-by-step. Then the step comes up to install the webpack development server. Then I write this code to cmd - npm run build . I get this error:

    λ npm run build                                                                                      
                                                                                                     
-> jj@1.0.0 build C:\Users\galib\Desktop\jj                                                           
-> webpack-dev-server                                                                                 
                                                                                                     
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 i -D webpack-cli                                                              
-> When using yarn: yarn add -D webpack-cli                                                          
internal/modules/cjs/loader.js:888                                                                   
  throw err;                                                                                         
  ^                                                                                                  
                                                                                                     
Error: Cannot find module 'webpack-cli/bin/config-yargs'                                             
Require stack:                                                                                       
- C:\Users\galib\AppData\Roaming\npm\node_modules\webpack-dev-server\bin\webpack-dev-server.js       
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15)                      
    at Function.Module._load (internal/modules/cjs/loader.js:730:27)                                 
    at Module.require (internal/modules/cjs/loader.js:957:19)                                        
    at require (internal/modules/cjs/helpers.js:88:18)                                               
    at Object.<anonymous> (C:\Users\galib\AppData\Roaming\npm\node_modules\webpack-dev-server\bin\web
    at Module._compile (internal/modules/cjs/loader.js:1068:30)                                      
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)                        
    at Module.load (internal/modules/cjs/loader.js:933:32)                                           
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)                                 
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {            
  code: 'MODULE_NOT_FOUND',                                                                          
  requireStack: [                                                                                    
    'C:\\Users\\galib\\AppData\\Roaming\\npm\\node_modules\\webpack-dev-server\\bin\\webpack-dev-serv
  ]                                                                                                  
}                                                                                                    
npm ERR! code ELIFECYCLE                                                                             
npm ERR! errno 1                                                                                     
npm ERR! jj@1.0.0 build: `webpack-dev-server`                                                        
npm ERR! Exit status 1                                                                               
npm ERR!                                                                                             
npm ERR! Failed at the jj@1.0.0 build 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\galib\AppData\Roaming\npm-cache\_logs\2021-06-08T18_22_59_337Z-debug.log       

Answer 1

The article you read was probably written before Webpack's cli was moved to webpack-cli , so you might need one small extra step.

Please install 'webpack-cli' in addition to webpack itself to use the CLI -> When using npm: npm i -D webpack-cli -> When using yarn: yarn add -D webpack-cli

Run npm i -D webpack-cli and then you can use the Webpack CLI.