webpack實(shí)現(xiàn)熱加載自動(dòng)刷新的方法
本文介紹了webpack實(shí)現(xiàn)熱加載自動(dòng)刷新的方法,分享給大家,具體如下:
一、webpack-dev-server
一個(gè)輕量級(jí)的服務(wù)
功能:修改代碼及時(shí)呈現(xiàn)到瀏覽器上。
第一步:安裝
npm install webpack-dev-server -g
第二步:寫(xiě)入到依賴
npm install webpack-dev-server --save-dev
第三步:修改webpack配置文件
module.exports = { entry:"./js/index.js", output:{ path:"/", //注意這里的改變,必須是根目錄,指定目錄無(wú)效,因?yàn)閣ebpack會(huì)在內(nèi)存中根目錄下生成下面文件名。 filename:"bundle.js" }, module:{ loaders:[ { test:/\.css$/,loader:'style-loader'}, { test:/\.css$/,loader:'css-loader'} ] }, resolve:{ extensions:['.vue','.js',".css",'jsx'] //自動(dòng)補(bǔ)全識(shí)別后綴 } }
說(shuō)明:如果想指定輸出目錄你需要自己學(xué)習(xí) Content Base 命令的使用。
第四步: 修改index.html
<script type="text/javascript" src="bundle.js"></script>
第五步:運(yùn)行如下命令 實(shí)現(xiàn)自動(dòng)刷新。
webpack-dev-server --hot --inline
說(shuō)明:
webpack-dev-server的默認(rèn)端口號(hào)是8080
第六步:
訪問(wèn)http://localhost:8080/index.html 然后修改css就能立即看到反應(yīng)在網(wǎng)頁(yè)上了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 詳解webpack 多頁(yè)面/入口支持&公共組件單獨(dú)打包
- webpack常用配置項(xiàng)配置文件介紹
- 基于vuejs+webpack的日期選擇插件
- webpack中引用jquery的簡(jiǎn)單實(shí)現(xiàn)
- Vue.js中用webpack合并打包多個(gè)組件并實(shí)現(xiàn)按需加載
- 詳解如何使用webpack打包Vue工程
- 深入理解Webpack 中路徑的配置
- Webpack+Vue如何導(dǎo)入Jquery和Jquery的第三方插件
- 詳解webpack分離css單獨(dú)打包
- webpack打包后直接訪問(wèn)頁(yè)面圖片路徑錯(cuò)誤的解決方法
- webpack獨(dú)立打包和緩存處理詳解
- 詳解使用vue腳手架工具搭建vue-webpack項(xiàng)目
- Webpack 實(shí)現(xiàn) Node.js 代碼熱替換
- 深入淺出webpack之externals的使用
- Webpack實(shí)現(xiàn)按需打包Lodash的幾種方法詳解
- 詳解webpack 如何集成第三方j(luò)s庫(kù)
- Vue項(xiàng)目webpack打包部署到服務(wù)器的實(shí)例詳解
- 加速Webpack構(gòu)建技巧總結(jié)
相關(guān)文章
JavaScript設(shè)計(jì)模式之迭代者模式詳情
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之迭代者模式詳情,迭代器設(shè)計(jì)模式能夠可以讓我們更方便的且有規(guī)矩的進(jìn)行訪問(wèn)復(fù)合數(shù)據(jù)的每一項(xiàng),也可以通過(guò)迭代器進(jìn)行完成一些流線式操作2022-06-06JavaScript?字符串新增方法?trim()?的使用說(shuō)明
這篇文章主要介紹了JavaScript字符串新增方法trim()的使用說(shuō)明,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-09-09Javascript驗(yàn)證用戶輸入U(xiǎn)RL地址是否為空及格式是否正確
這篇文章主要介紹了Javascript驗(yàn)證用戶輸入U(xiǎn)RL地址是否為空及格式是否正確,很實(shí)用,需要的朋友可以參考下2014-10-10js 失去焦點(diǎn)時(shí)關(guān)閉層實(shí)現(xiàn)代碼
失去焦點(diǎn)時(shí)關(guān)閉層實(shí)現(xiàn)代碼。大家可以參考下。2009-05-05EditPlus中的正則表達(dá)式 實(shí)戰(zhàn)(2)
這篇文章主要介紹了EditPlus中的正則表達(dá)式 實(shí)戰(zhàn)(2)的相關(guān)資料,需要的朋友可以參考下2016-12-12