webpack 使用教程--實時刷新測試

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

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

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

　　使用開發服務器

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

　　通過以下命令全局安裝

npm install webpack-dev-server -g

　　啟動服務器

webpack-dev-server --progress --colors

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

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

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

1. js 文件修改
2. webpack-dev-server 監控到變化
3. webpack 重新編譯
4. 實時更新瀏覽器中的頁面

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

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

1. iframe 模式

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

2. inline 模式

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

 

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

{
  "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搭建前端工程解決方案探索

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