Javascript 首先将js应用程序与Web包进行交互。用java

我尝试为JavaWebService创建我的第一个实时UI。我需要使用react js，但我从未使用过这种技术。当然，在最初的5分钟之后，我在安装和配置webpack（纱线）、react js和babel方面遇到了问题。我遵循本教程

另外，我添加到项目配置中。当我想启动我的应用程序-使用推荐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_00_33_741Z-debug.log

>crew@1.0.0启动C:\Projekt\crew\crew用户界面
>Web包开发服务器--热
CLI移动到一个单独的包中：webpack CLI。
请在webpack本身之外安装“webpack cli”以使用cli。
->使用npm时：npm安装webpack cli-D
->使用纱线时：纱线添加网页包cli-D
module.js:549
犯错误；
^
错误：找不到模块“webpack cli/bin/config yargs”
在Function.Module.\u解析文件名（Module.js:547:15）
在Function.Module.\u加载（Module.js:474:25）
at Module.require（Module.js:596:17）
根据需要（内部/module.js:11:18）
反对。（C:\Users\mtmi\AppData\Roaming\npm\node\u modules\webpack dev server\bin\webpack dev server.js:65:1）
编译（Module.js:652:30）
在Object.Module.\u extensions..js（Module.js:663:10）
在Module.load（Module.js:565:32）
在tryModuleLoad时（module.js:505:12）
在Function.Module.\u加载（Module.js:497:3）
npm错误！代码失效循环
npm错误！错误1
npm错误！crew@1.0.0start:`webpack dev server--hot`
npm错误！退出状态1
npm错误！
npm错误！失败crew@1.0.0开始脚本。
npm错误！这可能不是npm的问题。上面可能还有其他日志输出。
npm错误！此运行的完整日志可在以下位置找到：
npm错误！C:\Users\mtmi\AppData\Roaming\npm cache\\ u logs\2018-05-18T08\u 00\u 33\u 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

> crew@1.0.0 start C:\Projekt\crew\crew-ui
> webpack-dev-server --hot

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
‼ ｢wdm｣: Hash: 56e249c3211b89f95750
Version: webpack 4.8.3
Time: 5879ms
Built at: 2018-05-18 11:37:03
   Asset     Size  Chunks                    Chunk Names
index.js  254 KiB       0  [emitted]  [big]  main
Entrypoint main [big] = index.js
 [0] ./node_modules/react/index.js 190 bytes {0} [built]
 [1] (webpack)/hot/log.js 1.03 KiB {0} [built]
 [6] (webpack)/hot/emitter.js 77 bytes {0} [built]
 [9] ./App.jsx 2.24 KiB {0} [built]
[19] ./main.js 470 bytes {0} [built]
[20] (webpack)/hot/log-apply-result.js 1.31 KiB {0} [built]
[21] (webpack)/hot/dev-server.js 1.66 KiB {0} [built]
[23] ./node_modules/webpack/hot sync nonrecursive ^\.\/log$ 170 bytes {0} [built]
[28] ./node_modules/webpack-dev-server/client/overlay.js 3.58 KiB {0} [built]
[30] ./node_modules/webpack-dev-server/client/socket.js 1.05 KiB {0} [built]
[31] ./node_modules/loglevel/lib/loglevel.js 7.68 KiB {0} [built]
[33] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[40] (webpack)/node_modules/url/url.js 22.8 KiB {0} [built]
[41] ./node_modules/webpack-dev-server/client?http://localhost:8080 7.75 KiB {0} [built]
[42] multi ./node_modules/webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./main.js 52 bytes {0} [built]
    + 28 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  index.js (254 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (254 KiB)
      index.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
i ｢wdm｣: Compiled with warnings.

C:\Projekt\crew\crew ui>npm启动
> crew@1.0.0启动C:\Projekt\crew\crew用户界面
>Web包开发服务器--热
CLI移动到一个单独的包中：webpack CLI。
请在webpack本身之外安装“webpack cli”以使用cli。
->使用npm时：npm安装webpack cli-D
->使用纱线时：纱线添加网页包cli-D
module.js:549
犯错误；
^
错误：找不到模块“webpack cli/bin/config yargs”
在Function.Module.\u解析文件名（Module.js:547:15）
在Function.Module.\u加载（Module.js:474:25）
at Module.require（Module.js:596:17）
根据需要（内部/module.js:11:18）
反对。（C:\Users\mtmi\AppData\Roaming\npm\node\u modules\webpack dev server\bin\webpack dev server.js:65:1）
编译（Module.js:652:30）
在Object.Module.\u extensions..js（Module.js:663:10）
在Module.load（Module.js:565:32）
在tryModuleLoad时（module.js:505:12）
在Function.Module.\u加载（Module.js:497:3）
npm错误！代码失效循环
npm错误！错误1
npm错误！crew@1.0.0start:`webpack dev server--hot`
npm错误！退出状态1
npm错误！
npm错误！失败crew@1.0.0开始脚本。
npm错误！这可能不是npm的问题。上面可能还有其他日志输出。
npm错误！此运行的完整日志可在以下位置找到：
npm错误！C:\Users\mtmi\AppData\Roaming\npm cache\\ u logs\2018-05-18T08\u 14\u 28\u 520Z-debug.log

是在网页包更新到版本

4.0.0

后，它们拆分CLI（命令行界面）。您需要单独安装此软件：

npm install webpack-cli -D
// or
yarn add webpack-cli --dev

---

问题已修复，在webpack.config.js中，我需要更改

module: {
loaders: [

到

此操作后，nmp启动并返回如下内容：

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

> crew@1.0.0 start C:\Projekt\crew\crew-ui
> webpack-dev-server --hot

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
‼ ｢wdm｣: Hash: 56e249c3211b89f95750
Version: webpack 4.8.3
Time: 5879ms
Built at: 2018-05-18 11:37:03
   Asset     Size  Chunks                    Chunk Names
index.js  254 KiB       0  [emitted]  [big]  main
Entrypoint main [big] = index.js
 [0] ./node_modules/react/index.js 190 bytes {0} [built]
 [1] (webpack)/hot/log.js 1.03 KiB {0} [built]
 [6] (webpack)/hot/emitter.js 77 bytes {0} [built]
 [9] ./App.jsx 2.24 KiB {0} [built]
[19] ./main.js 470 bytes {0} [built]
[20] (webpack)/hot/log-apply-result.js 1.31 KiB {0} [built]
[21] (webpack)/hot/dev-server.js 1.66 KiB {0} [built]
[23] ./node_modules/webpack/hot sync nonrecursive ^\.\/log$ 170 bytes {0} [built]
[28] ./node_modules/webpack-dev-server/client/overlay.js 3.58 KiB {0} [built]
[30] ./node_modules/webpack-dev-server/client/socket.js 1.05 KiB {0} [built]
[31] ./node_modules/loglevel/lib/loglevel.js 7.68 KiB {0} [built]
[33] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[40] (webpack)/node_modules/url/url.js 22.8 KiB {0} [built]
[41] ./node_modules/webpack-dev-server/client?http://localhost:8080 7.75 KiB {0} [built]
[42] multi ./node_modules/webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./main.js 52 bytes {0} [built]
    + 28 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  index.js (254 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (254 KiB)
      index.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
i ｢wdm｣: Compiled with warnings.

---

不幸的是没有帮助：/确保webpack在版本4上，并且所有全局webpack都已删除。另外，请尝试完全重新安装所有节点模块。