js-工具嘗試篇-webpack-dev-server

之前看demo或者作開發的時候，經常看到webpack-dev-server。
這邊敲代碼，同時刷新瀏覽器，真是nice!
可是本身卻沒有了解學習過它是怎一回事，直接就着用。致使如今以爲不把這個東西吃一吃，渾身不自在！

原理是什麼
這麼神奇的東西的原理是什麼，做爲小白開發者固然很好奇。
看介紹http://webpack.github.io/docs...

webpack-dev-server是一個基於express框架的nodejs小服務，經過webpack-dev-middleware來處理webpack這個打包機（小walker查了一下，webpack-dev-middleware的做用是把webpack打包成中間件）。它也有一個鏈接這個服務的小運行環境，經由sock.js實現（sock.js小walker查了一下，是一個js庫，可用做建立跨瀏覽器的，瀏覽器和服務器間的通訊信道）。

原理大體清楚了，還能夠根據需求選不一樣的模式？事不宜遲，趕忙試試吧。

嘗試代碼的github地址https://github.com/WalkerZyy/...
Try No.1 hello world
文件目錄：

package.json:

配置webpack.config.js：

參考着官網寫了個服務：
因爲unshift進dev的那串代碼意義不明，因此先註釋了，後面再研究

dev中的main.js：

helloworld.html:

package.json中加命令

瀏覽器中看結果：

好了，成功了，可是仍是有些小疑惑，下面一點點來扣

首先，參數解讀之contentBase

The webpack-dev-server will serve the files in the current directory, unless you configure a specific content base.

也就是說，服務會默認一個網站目錄，若是我不填這個參數，至關於
contentBase:'./'
瀏覽器訪問結果：

現象觀察，生成的index.js在哪裏
個人helloworld.html裏引入了編譯後的index.js，可是bin目錄裏並無，任何目錄裏都沒有。那麼是如何引進來的呢？

因此說，是生成在內存中的。
描述中，有個publicPath，這時候我若是添加publicPath，也就是「/assets/」

取不到了
改成：

就ok了

另外如英語描述，打包是實時的，我加個新感嘆號

就看到又打包了，刷新網頁：

自動刷新
剛纔沒有自動刷新的，由於沒有配
自動刷新有兩種模式Inline 和iframe
最終效果都同樣
參考http://blog.csdn.net/chengnuo...
這兩種模式，官網都有講
webpack-dev-server的啓動模式有兩種
node Api模式和cmd模式
以前註釋掉的下面這段代碼就是配置nodejs Api形式的inline模式

Hot Module Replacement
熱替換是什麼
參考https://segmentfault.com/a/11...
命令行方式的作法先略去，直接看node.js Api的作法
按照官網的作法

public地址不對會有跨域報錯
熱替換原來也是要刷新頁面的嗎？
https://segmentfault.com/a/11...
https://segmentfault.com/q/10...
因此說，熱替換是給能夠熱替換的模塊用的

好了，不糾結了，先寫這麼多