溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹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就能立即看到反應在網頁上了。
以上是“webpack如何實現熱加載自動刷新”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
