? ? ? ? ? ? ? ? ? ? ? ? ? ?webpack——webpack-dev-server
1.安裝"webpack-dev-server"
npm install webpacke-dev-server --save-dev??
2."webpack-dev-server"在package.json中配置??
"script":{??
"dev":"webpack-dev-server"??
}??
3."webpack-dev-server"在webpack.config.js的配置??
devServer: {
//開發(fā)服務(wù)器的配置
? ? port:3000,
? ? progress:true,//打包進(jìn)度條的顯示
? ? contentBase:path.resolve(__dirname,'dist'),//將dist作為靜態(tài)文件目錄
? ? compress:true,
? ? open:true
}
"webpack-dev-server"屬性解釋??
(1) contentBase? ：指定服務(wù)器資源的根目錄展蒂，如果不設(shè)置没龙，默認(rèn)是項(xiàng)目根目錄今瀑，例如contentBase:"./dist",那么生產(chǎn)的文件都會放在dist目錄下（npx webpack即webpackda打包和"webpack-dev-server"的區(qū)別：webpack打包生成js文件减俏，真實(shí)的文件陋守；"webpack-dev-server"不會輸出js文件，僅僅出在內(nèi)存中）
(2) port:設(shè)置服務(wù)的端口號
(3) host:服務(wù)器的主機(jī)號
(4) open:運(yùn)行后自動打開瀏覽器
(5) compress:設(shè)置為true時(shí)對所有服務(wù)器資源采用gzip壓縮方式（對js,css進(jìn)行壓縮咽弦，提高傳輸速率砂缩，優(yōu)化前端性能）
(6) hot?和?inline：自動刷新和模塊熱替換機(jī)制
(7) filename:在惰性模式中，次選項(xiàng)可以減少編譯焙压。如果output的filename:"bundle.js",這里的lazy：true,filename:"bundle.js"
