这篇文章主要讲解了“webpack中怎么配置服务热更新”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“webpack中怎么配置服务热更新”吧！
热更新的意思是：左边打开浏览器，右边编译器，当编译器中的内容改变，按下ctrl+s，左边的浏览器会跟着编译器的内容发生改变
配置devServer
devServer有四个目录结构：
constpath=require('path')//path是一个常量不能更改，path需要引入varwebpack=require('webpack')
module.exports={//bundle入口
entry:{
entry:'./src/entry.js',//下面的entry是随便起的名字
entry2:'./src/entry2.js'//有两个入口也要有两个出口
},//bundle输出
output:{
path:path.resolve(__dirname,'dist'),//绝对路径
filename:'[name].js'//可重命名当有多个入口文件时，出口文件用name，说明打包的出口文件和入口文件名相同
},
module:{},
plugins:[],
devServer:{
contentBase:path.resolve(__dirname,'dist'),
host:'10.212.109.18',
compress:true,
port:8087
}
}
npminstallwebpack-dev-server–save-dev安装一个只在开发中使用的webpack-dev-server
然后输入webpack-dev-server会报出不是内部命令，因为安装到了node_modules里了，找不到，所以需要package.json里scripts里面的内容删除，自己在里面写“server”:”webpack-dev-server”
在package.json里面配置好server后输入：npmrunserver会报错
>y@1.0.0serverF:\webLearn\webpackLearn
>webpack-dev-server
TheCLImovedintoaseparatepackage:webpack-cli.
Pleaseinstall'webpack-cli'inadditiontowebpackitselftousetheCLI.->Whenusingnpm:npminstallwebpack-cli-D
->Whenusingyarn:yarnaddwebpack-cli-Dmodule.js:549
throwerr;
^Error:Cannotfindmodule'webpack-cli/bin/config-yargs'
atFunction.Module._resolveFilename(module.js:547:15)
atFunction.Module._load(module.js:474:25)
atModule.require(module.js:596:17)
atrequire(internal/module.js:11:18)
atObject.<anonymous>(F:\webLearn\webpackLearn\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
atModule._compile(module.js:652:30)
atObject.Module._extensions..js(module.js:663:10)
atModule.load(module.js:565:32)
attryModuleLoad(module.js:505:12)
atFunction.Module._load(module.js:497:3)
npmERR!codeELIFECYCLE
npmERR!errno1npmERR!y@1.0.0server:`webpack-dev-server`
npmERR!Exitstatus1npmERR!
npmERR!Failedatthey@1.0.0serverscript.
npmERR!Thisisprobablynotaproblemwithnpm.Thereislikelyadditionalloggingoutputabove.
npmERR!Acompletelogofthisruncanbefoundin:
npmERR!C:\Users\文件夹名称\AppData\Roaming\npm-cache\_logs\2018-07-10T08_59_23_339Z-debug.log
原因是找不到webpack-cli这个包，所以用npminstallwebpack-cli安装webbpack-cli
安装完成后执行==npmrunserver==会出现ru下，就大功告成了，复制你的端口地址在浏览器上运行即可
如下：
>y@1.0.0serverF:\webLearn\webpackLearn
>webpack-dev-server
i｢wds｣:Projectisrunningathttp://10.212.109.18:8087/i｢wds｣:webpackoutputisservedfrom/
i｢wds｣:ContentnotfromwebpackisservedfromF:\webLearn\webpackLearn\dist
‼｢wdm｣:Hash:0a1133d150c765ff1b91
Version:webpack4.15.1Time:12622ms
Builtat:2018-07-1017:01:51
AssetSizeChunksChunkNames
entry2.js139KiB0[emitted]entry2
entry.js139KiB1[emitted]entry
Entrypointentry=entry.js
Entrypointentry2=entry2.js
[3](webpack)/hot/emitter.js77bytes{0}{1}[built]
[4](webpack)/hot/log.js1010bytes{0}{1}[optional][built]
[5](webpack)/hotsyncnonrecursive^\.\/log$170bytes{0}{1}[built]
[8]./node_modules/html-entities/index.js231bytes{0}{1}[built]
[10](webpack)-dev-server/client/overlay.js3.58KiB{0}{1}[built]
[12](webpack)-dev-server/client/socket.js1.05KiB{0}{1}[built]
[13]./node_modules/loglevel/lib/loglevel.js7.68KiB{0}{1}[built]
[14]./node_modules/ansi-regex/index.js135bytes{0}{1}[built]
[15]./node_modules/strip-ansi/index.js161bytes{0}{1}[built]
[22]./node_modules/url/url.js22.8KiB{0}{1}[built]
[23](webpack)-dev-server/client?http://10.212.109.18:80877.75KiB{0}{1}[built][24]./src/entry2.js23bytes{0}[built]
[25]multi(webpack)-dev-server/client?http://10.212.109.18:8087./src/entry2.js40bytes{0}[built][26]./src/entry.js60bytes{1}[built]
[27]multi(webpack)-dev-server/client?http://10.212.109.18:8087./src/entry.js40bytes{1}[built]
+13hiddenmodules
WARNINGinconfiguration
The'mode'optionhasnotbeenset,webpackwillfallbackto'production'forthisvalue.Set'mode'optionto'development'or'production'toenabledefaultsforeachenvironment.
Youcanalsosetitto'none'todisableanydefaultbehavior.Learnmore:https://webpack.js.org/concepts/mode/i｢wdm｣:Compiledwithwarnings.
感谢各位的阅读，以上就是“webpack中怎么配置服务热更新”的内容了，经过本文的学习后，相信大家对webpack中怎么配置服务热更新这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
