webpack 热部署

所见即所得，修改即有效，开发人员都希望自己修改代码后，马上就能看到效果！
webpack 提供了一种热部署的方式，让你在修改前端代码时，浏览器自动刷新效果！
原理如下：
1，利用Nodejs的expressjs包搭建web Server指向前端代码
2，利用浏览器的web socket协议跟 web Server保持实时通信

下面来实践下

1，安装 webpack-dev-server

npm install webpack-dev-server --save-dev

2,启动 webpack-dev-server

$ node_modules/.bin/webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Hash: 974e31ec3beef1c7ece1
Version: webpack 2.2.1
Time: 1121ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  323 kB       0  [emitted]  [big]  main
chunk    {0} bundle.js (main) 309 kB [entry] [rendered]
   [35] ./entry.js 94 bytes {0} [built]
   [36] (webpack)-dev-server/client?http://localhost:8080 5.28 kB {0} [built]
   [39] ./~/css-loader!./style.css 197 bytes {0} [built]
   [42] ./~/events/events.js 8.33 kB {0} [built]
   [43] ./~/html-entities/index.js 231 bytes {0} [built]
   [50] ./~/querystring-es3/index.js 127 bytes {0} [built]
   [79] ./~/strip-ansi/index.js 161 bytes {0} [built]
   [80] ./~/style-loader/addStyles.js 6.91 kB {0} [built]
   [81] ./~/style-loader!./~/css-loader!./style.css 895 bytes {0} [built]
   [83] ./~/url/url.js 23.3 kB {0} [built]
   [84] ./~/url/util.js 314 bytes {0} [built]
   [85] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
   [86] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
   [88] (webpack)/hot/emitter.js 77 bytes {0} [built]
   [89] multi (webpack)-dev-server/client?http://localhost:8080 ./entry.js 40 by
tes {0} [built]
     + 75 hidden modules
webpack: Compiled successfully.

3，浏览器打开 http://localhost:8080/，即可看到页面效果

4，现在修改代码，浏览器是不会自动刷新的，需要开启热部署模式

$ node_modules/.bin/webpack-dev-server --inline --hot --colors

5，命令启动好麻烦，添加到配置文件package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "node_modules/.bin/webpack-dev-server --inline --hot --colors"
  },

6，重新启动热部署，然后修改代码，浏览器会自动刷新看到效果啦

$ npm run server


> test_webpack@1.0.0 server C:\Users\yunhuichen\test_webpack
> webpack-dev-server --inline --hot --colors

Project is running at http://localhost:8080/
webpack output is served from /
Hash: 862a8e7ad9a72939de52
Version: webpack 2.2.1
Time: 1259ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  350 kB       0  [emitted]  [big]  main
chunk    {0} bundle.js (main) 311 kB [entry] [rendered]
   [15] ./~/css-loader!./style.css 199 bytes {0} [built]
   [36] (webpack)/hot/emitter.js 77 bytes {0} [built]
   [37] ./entry.js 94 bytes {0} [built]
   [38] (webpack)-dev-server/client?http://localhost:8080 5.28 kB {0} [built]
   [39] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
   [44] ./~/events/events.js 8.33 kB {0} [built]
   [45] ./~/html-entities/index.js 231 bytes {0} [built]
   [49] ./~/punycode/punycode.js 14.7 kB {0} [built]
   [81] ./~/strip-ansi/index.js 161 bytes {0} [built]
   [83] ./~/style-loader!./~/css-loader!./style.css 895 bytes {0} [built]
   [85] ./~/url/url.js 23.3 kB {0} [built]
   [87] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
   [88] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
   [90] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
   [91] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-
server ./entry.js 52 bytes {0} [built]
     + 77 hidden modules
webpack: Compiled successfully.
webpack: Compiling...
Hash: 3519ed634c7aa4ef3afd
Version: webpack 2.2.1
Time: 45ms
                               Asset       Size  Chunks                    Chunk
 Names
                           bundle.js     350 kB       0  [emitted]  [big]  main
0.862a8e7ad9a72939de52.hot-update.js  273 bytes       0  [emitted]         main
862a8e7ad9a72939de52.hot-update.json   43 bytes          [emitted]
chunk    {0} bundle.js, 0.862a8e7ad9a72939de52.hot-update.js (main) 311 kB [entr
y] [rendered]
   [15] ./~/css-loader!./style.css 200 bytes {0} [built]
     + 91 hidden modules
webpack: Compiled successfully.
webpack: Compiling...
Hash: 432cf697ed937343ed5b
Version: webpack 2.2.1
Time: 40ms
                               Asset       Size  Chunks                    Chunk
 Names
                           bundle.js     350 kB       0  [emitted]  [big]  main
0.3519ed634c7aa4ef3afd.hot-update.js  173 bytes       0  [emitted]         main
3519ed634c7aa4ef3afd.hot-update.json   43 bytes          [emitted]
chunk    {0} bundle.js, 0.3519ed634c7aa4ef3afd.hot-update.js (main) 311 kB [entr
y] [rendered]
   [37] ./entry.js 69 bytes {0} [built]
     + 91 hidden modules
webpack: Compiled successfully.