webpack實現熱加載自動刷新的方法

來源：懂視網責編：小采時間：2020-11-27 22:33:42

webpack實現熱加載自動刷新的方法

webpack實現熱加載自動刷新的方法:本文介紹了webpack實現熱加載自動刷新的方法，分享給大家，具體如下：一、webpack-dev-server 一個輕量級的服務功能：修改代碼及時呈現到瀏覽器上。第一步：安裝 npm install webpack-dev-server -g 第二步：寫入到依賴 npm

推薦度：

點擊下載本文 文檔為doc格式

導讀webpack實現熱加載自動刷新的方法:本文介紹了webpack實現熱加載自動刷新的方法，分享給大家，具體如下：一、webpack-dev-server 一個輕量級的服務功能：修改代碼及時呈現到瀏覽器上。第一步：安裝 npm install webpack-dev-server -g 第二步：寫入到依賴 npm

本文介紹了webpack實現熱加載自動刷新的方法，分享給大家，具體如下：

一、webpack-dev-server

一個輕量級的服務

功能：修改代碼及時呈現到瀏覽器上。

第一步：安裝

npm install webpack-dev-server -g

這里寫圖片描述

第二步：寫入到依賴

npm install webpack-dev-server --save-dev

這里寫圖片描述
第三步：修改webpack配置文件

 module.exports = {
 entry:"./js/index.js",
 output:{
 path:"/", 
 //注意這里的改變，必須是根目錄,指定目錄無效，因為webpack會在內存中根目錄下生成下面文件名。
 filename:"bundle.js"
 },
 module:{
 loaders:[
 { test:/\.css$/,loader:'style-loader'},
 { test:/\.css$/,loader:'css-loader'}
 ]
 },
 resolve:{
 extensions:['.vue','.js',".css",'jsx'] //自動補全識別后綴
 }
 }

說明：如果想指定輸出目錄你需要自己學習 Content Base 命令的使用。

第四步：修改index.html

<script type="text/javascript" src="bundle.js"></script>

第五步：運行如下命令實現自動刷新。

webpack-dev-server --hot --inline

說明：

webpack-dev-server的默認端口號是8080

第六步：

訪問http://localhost:8080/index.html 然后修改css就能立即看到反應在網頁上了。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

webpack實現熱加載自動刷新的方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：自動刷新 webpack webpack實現熱加載自動刷新的方法

熱門焦點

webpack實現熱加載自動刷新的方法

webpack實現熱加載自動刷新的方法

webpack實現熱加載自動刷新的方法

最新推薦

猜你喜歡

熱門推薦