本文介紹了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就能立即看到反應在網頁上了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
