Сначала отреагируйте приложением js с помощью веб-пакета.С явой

Question

Я пытаюсь создать свой первый живой интерфейс для веб-сервиса Java.Мне нужно использовать ответ JS, но я никогда не работаю с этой технологией.Конечно, после первых 5 минут у меня возникли проблемы с установкой и настройкой веб-пакета (пряжи), реагированием на js и babel.Я следую этому уроку https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm

дополнительно я добавляю в проект конфигурации пряжи.Когда я хочу запустить свое приложение, используя commend 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

После вашего совета у меня появляется что-то вроде этого:

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

Answer 1

Проблема исправлена, в webpack.config.js мне нужно изменить

module: {
loaders: [

на

module: {
rules: [

После этой операции nmp запускается и возвращает что-то вроде этого:

> 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.

Answer 2

Да, после обновления веб-пакета до версии 4.0.0 они разделяют CLI (интерфейс командной строки).вам нужно установить это отдельно:

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