Shulou(Shulou.com)06/01 Report--

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.