webpack實現(xiàn)熱加載自動刷新的方法
更新時間：2017年07月30日 14:18:57 作者：冰穎靜軒
本文介紹了webpack實現(xiàn)熱加載自動刷新的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了webpack實現(xiàn)熱加載自動刷新的方法，分享給大家，具體如下：
一、webpack-dev-server
一個輕量級的服務(wù)
功能：修改代碼及時呈現(xiàn)到瀏覽器上。
第一步：安裝
npm install webpack-dev-server -g
第二步：寫入到依賴
npm install webpack-dev-server --save-dev
第三步：修改webpack配置文件
module.exports = {
entry:"./js/index.js",
output:{
path:"/",
//注意這里的改變，必須是根目錄,指定目錄無效，因為webpack會在內(nèi)存中根目錄下生成下面文件名。
filename:"bundle.js"
},
module:{
loaders:[
{ test:/\.css$/,loader:'style-loader'},
{ test:/\.css$/,loader:'css-loader'}
]
},
resolve:{
extensions:['.vue','.js',".css",'jsx'] //自動補全識別后綴
}
}
說明：如果想指定輸出目錄你需要自己學(xué)習(xí) Content Base 命令的使用。
第四步： 修改index.html
<script type="text/javascript" src="bundle.js"></script>
第五步：運行如下命令 實現(xiàn)自動刷新。
webpack-dev-server --hot --inline
說明：
webpack-dev-server的默認(rèn)端口號是8080
第六步：
訪問http://localhost:8080/index.html 然后修改css就能立即看到反應(yīng)在網(wǎng)頁上了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 詳解webpack 多頁面/入口支持&公共組件單獨打包
- webpack常用配置項配置文件介紹
- 基于vuejs+webpack的日期選擇插件
- webpack中引用jquery的簡單實現(xiàn)
- Vue.js中用webpack合并打包多個組件并實現(xiàn)按需加載
- 詳解如何使用webpack打包Vue工程
- 深入理解Webpack 中路徑的配置
- Webpack+Vue如何導(dǎo)入Jquery和Jquery的第三方插件
- 詳解webpack分離css單獨打包
- webpack打包后直接訪問頁面圖片路徑錯誤的解決方法
- webpack獨立打包和緩存處理詳解
- 詳解使用vue腳手架工具搭建vue-webpack項目
- Webpack 實現(xiàn) Node.js 代碼熱替換
- 深入淺出webpack之externals的使用
- Webpack實現(xiàn)按需打包Lodash的幾種方法詳解
- 詳解webpack 如何集成第三方j(luò)s庫
- Vue項目webpack打包部署到服務(wù)器的實例詳解
- 加速Webpack構(gòu)建技巧總結(jié)
相關(guān)文章
利用TypeScript從字符串字面量類型提取參數(shù)類型
這篇文章主要介紹了利用TypeScript從字符串字面量類型提取參數(shù)類型，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要介紹了JS 實現(xiàn)緩存算法的示例（FIFO/LRU）,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
比較不錯的js異或加解密實例代碼，方便學(xué)習(xí)js加解密的朋友2008-06-06
javascript實現(xiàn)根據(jù)函數(shù)名稱字符串動態(tài)執(zhí)行函數(shù)的方法示例
這篇文章主要介紹了javascript實現(xiàn)根據(jù)函數(shù)名稱字符串動態(tài)執(zhí)行函數(shù)的方法,結(jié)合實例形式分析了JS函數(shù)名的判斷及函數(shù)動態(tài)調(diào)用相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
基于BootStrap的Metronic框架實現(xiàn)頁面鏈接收藏夾功能按鈕移動收藏記錄(使用Sortable進行拖動排序)
這篇文章主要介紹了基于BootStrap的Metronic框架實現(xiàn)頁面鏈接收藏夾功能按鈕移動收藏記錄(使用Sortable進行拖動排序)的相關(guān)資料,非常不錯，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了json 字符串之間的相互轉(zhuǎn)換 ,通過eval()函數(shù)可以將JSON字符串轉(zhuǎn)化為對象，本需要的朋友可以參考下2014-08-08
這篇文章主要介紹了JS中apply()的應(yīng)用,結(jié)合實例形式分析了apply()操作數(shù)組的相關(guān)使用技巧,需要的朋友可以參考下2019-06-06
JavaScript必知必會(九）function 說起 閉包問題
這篇文章主要介紹了JavaScript必知必會(九）function 說起 閉包問題的相關(guān)資料,需要的朋友可以參考下2016-06-06
現(xiàn)在基本上我很少在對象里面寫事情觸發(fā)行為了,因為感覺那樣做相同的對象代碼利用率太低,容易導(dǎo)致代碼冗余.2008-08-08
這篇文章主要為大家詳細(xì)介紹了一個簡易的js圖片輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07