webpack學習筆記二
inline-source-map 有助於追蹤錯誤和警告在源代碼中的原始位置，如果不添加，則堆棧會簡單的指向bundle.js，顯然不利於我們開發過程中修改代碼。
在print.js中生成一個錯誤：
然後npm run build
實現自動構建
1、使用觀察者模式：npm run watch，進入觀察者模式，改變了代碼不用再npm run build一次，修改後會自動監聽改變，刷新瀏覽器（手動刷新）即可查看改變的效果。
2、使用webpack-dev-server,在觀察者模式下監聽到改變，不用手動刷新瀏覽器，會實現自動刷新瀏覽器。
npm install --save-dev webpack-dev-server
以上配置告知 webpack-dev-server，在 localhost:8080 下建立服務，將 dist 目錄下的文件，作爲可訪問文件。
然後再命令行輸入npm start 就進入了自動構建自動刷新的機制，就是我們所謂的熱調試。
webpack-dev-middleware:把webpack處理後的文件傳遞給一個服務器server，webpack-dev-server在內部使用了它，同時他也可以作爲一個單獨的包來使用，以便進行更多自定義設置來實現更多的需求。middleware(中間件)
npm install --save-dev express webpack-dev-middleware
添加一個server.js文件，和webpack.config.js同級，內容如下
配置好之後，執行npm run server，可以看到控制檯打印出了server.js中app.listen中console.log的內容
在瀏覽器中輸入http://localhost:3000即可看到剛纔的頁面
有的編輯器有“安全寫入”功能，會影響重新編譯，所以要做相應的配置。
runtime: 瀏覽器運行時，webpack用來連接模塊化的 應用程序的所有代碼
manifest: 在編輯器開始執行、解析和映射應用程序時，保留的所有的模塊的詳細要點都存放在Mainifest這個數據集合中。
通過使用manifest中的數據，runtime將能夠查詢模塊的標識符，檢索出背後對應的模塊。
模塊熱替換：允許在運行時更新各種模塊，而無需完全刷新。
1、更新webpack-dev-server的配置
2、修改index.js,使得print.js內部發生變更時告訴webpack接受更新的模塊。
3、修改print.js中的console.log()的內容，在瀏覽器中的控制檯刻意看到：
在這裏可以看到，點擊按鈕打印的還是更改前的console.log內容，這是因爲onclick時間仍然綁定在舊的printMe上面。修改辦法：
