搭建Java服务React UI时Webpack启动报错求助

Hey there! I see you're diving into React for your Java Web service's real-time UI—welcome to the club! Let's work through this webpack-cli error you're hitting, even after following the initial prompt to install it.

The Root of the Problem #

From your error logs, the issue is that your globally installed webpack-dev-server is trying to load an old path for webpack-cli (webpack-cli/bin/config-yargs) that doesn't exist in newer versions. Webpack 4 moved the CLI to a separate package, but older versions of webpack-dev-server expect the CLI to be in that specific location. On top of that, mixing global and local dependencies can cause version mismatches that make this problem stick around even after installing webpack-cli locally.

Step-by-Step Fix #

Let's get this sorted out with these straightforward steps:

1. Uninstall the global webpack-dev-server
   This is the main culprit since the error is pointing to the global installation at C:\Users\mtmi\AppData\Roaming\npm\node_modules\webpack-dev-server. Run this command:

   npm uninstall -g webpack-dev-server
   

2. Clean up your local dependencies

   • Delete the node_modules folder in your project directory (crew-ui)
   • Delete either package-lock.json (if you're using npm) or yarn.lock (if you're using Yarn) to ensure fresh installs

3. Reinstall compatible local dependencies
   Install webpack, webpack-cli, and webpack-dev-server locally (this ensures all versions play nice together). Choose the command matching your package manager:

   For npm:

   npm install webpack webpack-cli webpack-dev-server --save-dev
   

   For Yarn:

   yarn add webpack webpack-cli webpack-dev-server --dev
   

4. Update your start script (optional but recommended)
   Webpack 4 requires you to specify a mode (development/production). Update your package.json start script to include it:

   "scripts": {
     "start": "webpack-dev-server --hot --mode development"
   }
   

5. Run your project again
   Execute npm start—this should now use your local dependencies and avoid the module not found error.

Your Original Error Logs #

For reference, here are the error messages you encountered:

> crew@1.0.0 start C:\Projekt\crew\crew-ui
> 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:549
    throw err;
    ^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\mtmi\AppData\Roaming\npm\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! crew@1.0.0 start: `webpack-dev-server --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the crew@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\mtmi\AppData\Roaming\npm-cache\_logs\2018-05-18T08_00_33_741Z-debug.log

C:\Projekt\crew\crew-ui>npm start
> crew@1.0.0 start C:\Projekt\crew\crew-ui
> 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:549
    throw err;
    ^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\mtmi\AppData\Roaming\npm\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! crew@1.0.0 start: `webpack-dev-server --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the crew@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\mtmi\AppData\Roaming\npm-cache\_logs\2018-05-18T08_14_28_520Z-debug.log

内容的提问来源于stack exchange，提问作者Magdalena Rumakowicz