首先用 webpack 响应 js 应用程序。用java

Question

我尝试在实时 UI 中为 java webservice 创建我的第一个。我需要使用 react js，但我从不使用这种技术。当然，在前 5 分钟后，我在安装和配置 webpack（yarn）、react js 和 babel 时遇到了问题。我跟着这个教程 https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm

另外我添加到项目纱线配置中。当我想启动我的应用程序时 - 使用推荐 npm start 我有 en 错误：

> 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 start 并返回如下内容：

> 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

是的，在 webpack 更新到版本 4.0.0 之后，它们拆分了 CLI（命令行界面）。您需要单独安装：

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