webpack中怎么配置服务热更新

这篇文章主要讲解了“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中怎么配置服务热更新这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！