學習webpack，基本始終是圍繞：

　　1.如何安裝webpack
　　2.如何使用webpack
　　3.如何使用loader
　　4.如何使用開發服務器

　　可能我們會在如何使用開發服務器的時候，遇到諸如調試的相關問題：

　　使用開發服務器

　　我們webpack中使用的開發調試服務器通常是 webpack-dev-server，通過這個服務我們更多的是想實現無刷新的處理編譯入口文件。　

　　通過以下命令全局安裝

1	npm install webpack-dev-server -g

　　啟動服務器

1	webpack-dev-server --progress --colors

　　這會綁定一個小型express服務器到localhost:8080，來為你的靜態資源及bundle（自動編譯）服務。通過訪問http://localhost:8080/webpack-dev-server/bundle，bundle每次重編譯后瀏覽器頁面都會自動更新。

　　但這里可能會遇到，我們改動js文件，無法實時更新的問題，很大一部分原因是沒有理解編譯后的bundle是虛擬的問題，本地其實質是沒有編譯的，所以我們不能用本地的路徑去處理，需要進行更改為http://localhost:8080/bundle.js.

　　我們可能預想實現無刷新是這樣的：

js 文件修改

webpack-dev-server 監控到變化

webpack 重新編譯

實時更新瀏覽器中的頁面

　　但可惜的是，http://localhost:8080/index.html?對 js 文件的變化無動于衷，改完之后，手動刷新才能生效。

　　webpack-dev-server 提供了兩種模式用于自動刷新頁面：

iframe 模式

我們不訪問?http://localhost:8080，而是訪問http://localhost:8080/webpack-dev-server/index.html

inline 模式

在命令行中指定該模式，webpack-dev-server --inline。這樣http://localhost:8080/index.html?頁面就會在 js 文件變化后自動刷新了。

?

　 由于如此我的package.json文件可能就是這樣，方便我去快速啟動

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

{ ??"name":?"react-sample", ??"version":?"1.0.0", ??"description":?"webpack demo", ??"main":?"./src/entry.js", ??"scripts": { ????"start":?"webpack-dev-server --inline --hot", ????"build":?"webpack --display-error-details", ????"watch":?"webpack --progress --colors --watch" ??}, ??"repository": { ????"type":?"git", ????"url":?"https://github.com/dwqs/react_practice.git" ??}, ??"keywords": [ ????"react", ????"webpack" ??], ??"author":?"pomy", ??"devDependencies": { ????"babel-core":?"^5.8.25", ????"babel-loader":?"^5.3.2", ????"react":?"^0.14.5", ????"react-dom":?"^0.14.5", ????"react-hot-loader":?"^1.3.0", ????"webpack":?"^1.12.2", ????"webpack-dev-server":?"^1.14.0" ??} }

　　解釋一下官方推薦的無刷新：

　　示例代碼：

　　package.json

"scripts": {"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build",/*build導致找不到頁面 cannot file*/"hot": "webpack-dev-server --devtool eval --progress --colors --hot --content-base",}

　　　webpack.config.js

module.exports = {entry: ['webpack/hot/dev-server','webpack-dev-server/client?http://localhost:8080',path.resolve(__dirname, './src/entry.js')] };

　　官方的無刷新，其實是在前面講到的iframe實現的實時刷新，如果我們，至進行http://localhost:8080/index.html是不會進行實時刷新的。還有一點，就是官方后面加的build，作用時讓其監測，打包出bundle.js，但親測會導致，到cannot page file， 所以建議，調試完畢之后，手動打包。

　

　　最近給大家一個建議，多看官方的示例文檔，這才是快速入門的最佳渠道，webpack官方文檔。　

?　　注意：通常我們設置好webpack-dev-server服務自動刷新預覽功能之后，發現手機預覽不了，其實是由于webpack-pack-server服務安全機制導致的，只允許本機訪問，我們可以把host設置為0.0.0.0就可以允許或者設置為本機地址。

　　解決參考資料：stackoverflow問答??stackoverflow問答2??github isuues

參考資料：

　　webpack 使用教程

　　Webpack-dev-server結合后端服務器的熱替換配置

　　webpack入門(譯)

　　webpack插件實現實時刷新

　　WebPack 常用功能介紹

　　在express服務中搭建webpack-dev-server

　　基于webpack搭建前端工程解決方案探索

　　自己在項目中實現的熱更新

簡簡單單，pfan！出來混的，一切都是要還的。

轉載于:https://www.cnblogs.com/chris-oil/p/6241741.html

總結

以上是生活随笔為你收集整理的webpack 使用教程--实时刷新测试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。