npm run server报错原因之一：Cannot find module 'webpack-cli/bin/config-yargs'

使用npm run server 启动webpack-dev-server时报错：

E:\webpack_demo>npm run server

> webpacktest@1.0.0 server E:\webpack_demo
> 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 install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
module.js:529
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:527:15)
    at Function.Module._load (module.js:476:23)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (E:\webpack_demo\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpacktest@1.0.0 server: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpacktest@1.0.0 server 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\wagon\AppData\Roaming\npm-cache\_logs\2018-03-28T07_39_08_944Z-debug.log

---

原因是找不到webpack-cli这个包，咱们使用npm添加此包即可：

E:\webpack_demo>npm install webpack-cli
npm WARN deprecated nomnom@1.8.1: Package no longer supported. Contact support@npmjs.com for more info.
npm WARN deprecated babel-preset-es2015@6.24.1: ????  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
npm WARN webpacktest@1.0.0 No repository field.
npm WARN webpacktest@1.0.0 scripts['server'] should probably be scripts['start'].
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack-cli@2.0.13
added 333 packages in 76.978s

---

然后再执行npm run server：

E:\webpack_demo>npm run server

> webpacktest@1.0.0 server E:\webpack_demo
> webpack-dev-server

i ｢wds｣: Project is running at http://192.168.3.6:1717/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from E:\webpack_demo\dist
‼ ｢wdm｣: Hash: a9eea546fbe29f1fcd52
Version: webpack 4.2.0
Time: 6349ms
Built at: 2018-3-28 15:47:09
    Asset     Size  Chunks             Chunk Names
entry2.js  139 KiB       0  [emitted]  entry2
 entry.js  139 KiB       1  [emitted]  entry
Entrypoint entry = entry.js
Entrypoint entry2 = entry2.js
   [3] (webpack)/hot/emitter.js 77 bytes {0} {1} [built]
   [4] (webpack)/hot/log.js 1.03 KiB {0} {1} [optional] [built]
   [5] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {0} {1} [built]
   [8] ./node_modules/html-entities/index.js 231 bytes {0} {1} [built]
  [10] (webpack)-dev-server/client/overlay.js 3.58 KiB {0} {1} [built]
  [12] (webpack)-dev-server/client/socket.js 1.05 KiB {0} {1} [built]
  [13] ./node_modules/loglevel/lib/loglevel.js 7.68 KiB {0} {1} [built]
  [14] ./node_modules/ansi-regex/index.js 135 bytes {0} {1} [built]
  [15] ./node_modules/strip-ansi/index.js 161 bytes {0} {1} [built]
  [22] ./node_modules/url/url.js 22.8 KiB {0} {1} [built]
  [23] (webpack)-dev-server/client?http://192.168.3.6:1717 7.75 KiB {0} {1} [built]
  [24] ./src/entry2.js 16 bytes {0} [built]
  [25] multi (webpack)-dev-server/client?http://192.168.3.6:1717 ./src/entry2.js 40 bytes {0} [built]
  [26] ./src/entry.js 58 bytes {1} [built]
  [27] multi (webpack)-dev-server/client?http://192.168.3.6:1717 ./src/entry.js 40 bytes {1} [built]
    + 13 hidden modules

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
i ｢wdm｣: Compiled with warnings.

OK，搞定了 。下面给大家献上我的webpack配置和package.json：

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "test webpack",
  "main": "index.js",
  "scripts": {
    "server": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.2.0",
    "webpack-dev-server": "^3.1.1"
  },
  "dependencies": {
    "live-server": "^1.2.0",
    "webpack-cli": "^2.0.13"
  }
}

这个是package.json。

---

const path = require('path');
module.exports = {
    entry: {
        entry: './src/entry.js',
        entry2: './src/entry2.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {},
    plugins: [],
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        host: '192.168.3.6',
        compress: true,//服务器压缩
        port: 1717
    }
}

这个是webpack.config.js

---

未完待续。