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中怎么配置服務熱更新這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！