使用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：
这个是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"
}
}
这个个是webpack.config.js：
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
}
}
网友评论