配置服务：热更新

 

　　热更新的意思是：左边打开浏览器，右边编译器，当编译器中的内容改变，按下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.




本文转载自励志网