http://blog.csdn.net/chengnuo628/article/details/52441977
記錄下 webpack-dev-server 的用法.
首先，我們來看看基本的 webpack.config.js 的寫法
module.exports = {
entry: './src/js/index.js', output: { path: './dist/js', filename: 'bundle.js' } }
配置文件提供一個入口和一個出口， webpack 根據這個來進行 js的打包和編譯工作。雖然 webpack 提供了 webpack --watch 的命令來動態監聽文件的改變並實時打包，輸出新 bundle.js 文件，這樣文件多了之后打包速度會很慢，此外這樣的打包的方式不能做到 hot replace ，即每次 webpack 編譯之后，你還需要手動刷新瀏覽器。
webpack-dev-server 其中部分功能就能克服上面的2個問題。 webpack-dev-server 主要是啟動了一個使用 express 的 Http服務器 。它的作用 主要是用來伺服資源文件 。此外這個 Http服務器 和 client 使用了 websocket 通訊協議，原始文件作出改動后， webpack-dev-server 會實時的編譯，但是最后的編譯的文件並沒有輸出到目標文件夾，即上面配置的。
注意：你啟動webpack-dev-server后，你在目標文件夾中是看不到編譯后的文件的,實時編譯后的文件都保存到了內存當中。因此很多同學使用webpack-dev-server進行開發的時候都看不到編譯后的文件
下面來結合 webpack 的文檔和 webpack-dev-server 里部分源碼來說明下如何使用：
啟動
啟動 webpack-dev-server 有2種方式：
cmd line Node.js API
配置
我主要講解下 cmd line 的形式, Node.js API 形式大家去看下官方文檔。可通過 npm script 進行啟動。我的目錄結構是:
app
|__dist
| |__styles
| |__js
| |__bundle.js
| |__index.html
|__src
| |__styles
| |__js
| |__index.js |__node_modules |__package.json |__webpack.config.js
content-base
設定 webpack-dev-server 伺服的 directory 。如果不進行設定的話，默認是在當前目錄下。
webpack-dev-server --content-base ./dist
這個時候還要注意的一點就是在 webpack.config.js 文件里面，如果配置了 output 的 publicPath 這個字段的值的話，在 index.html 文件里面也應該做出調整。 因為 webpack-dev-server 伺服的文件是相對 publicPath 這個路徑的 。因此，如果你的 webpack.config.js 配置成這樣的：
module.exports = {
entry: './src/js/index.js', output: { path: './dist/js', filename: 'bundle.js'， publicPath: '/assets/' } }
那么，在 index.html 文件當中引入的路徑也發生相應的變化:
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> </head> <body> <script src="assets/bundle.js"></script> </body> </html>
如果在 webpack.config.js 里面沒有配置 output 的 publicPath 的話，那么index.html 最后引入的文件 js文件 路徑應該是下面這樣的。
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> </head> <body> <script src="bundle.js"></script> </body> </html>
Automatic Refresh
webpack-dev-server 支持2種自動刷新的方式：
-
Iframe mode
-
inline mode
這2種模式配置的方式和訪問的路徑稍微有點區別，最主要的區別還是 Iframe mode 是在網頁中嵌入了一個 iframe ，將我們自己的應用注入到這個 iframe 當中去，因此每次你修改的文件后，都是這個 iframe 進行了 reload 。
通過查看 webpack-dev-server 的源碼， lib 路徑下的 Server.js 文件，第38-48行，分別新建幾個流，這幾個流保存了 client 文件夾下的相關文件：
// Prepare live html page
var livePage = this.livePage = new StreamCache(); fs.createReadStream(path.join(__dirname, "..", "client", "live.html")).pipe(livePage); // Prepare the live js file var liveJs = new StreamCache(); fs.createReadStream(path.join(__dirname, "..", "client", "live.bundle.js")).pipe(liveJs); // Prepare the inlined js file var inlinedJs = new StreamCache(); fs.createReadStream(path.join(__dirname, "..", "client", "index.bundle.js")).pipe(inlinedJs);
// Init express server
var app = this.app = new express(); // middleware for serving webpack bundle this.middleware = webpackDevMiddleware(compiler, options); app.get("/__webpack_dev_server__/live.bundle.js", function(req, res) { res.setHeader("Content-Type", "application/javascript"); liveJs.pipe(res); }); app.get("/webpack-dev-server.js", function(req, res) { res.setHeader("Content-Type", "application/javascript"); inlinedJs.pipe(res); }); app.get("/webpack-dev-server/*", function(req, res) { res.setHeader("Content-Type", "text/html"); this.livePage.pipe(res); }.bind(this));
當使用 Iframe mode 時，請求 /webpack-dev-server/index.html 路徑時，會返回 client/index.html 文件，這個文件的內容就是：
<!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta charset="utf-8"/><meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/><script type="text/javascript" charset="utf-8" src="/__webpack_dev_server__/live.bundle.js"></script></head><body></body></html>
這個頁面會請求 live.bundle.js ,其中里面會新建一個 Iframe ，你的應用就被注入到了這個 Iframe 當中。同時 live.bundle.js 中含有 socket.io 的 client 代碼，這樣它就能和 webpack-dev-server 建立的 http server 進行 websocket 通訊了。並根據返回的信息完成相應的動作。
而 Inline-mode ，是 webpack-dev-server 會在你的 webpack.config.js 的入口配置文件中再添加一個入口,
module.exports = {
entry: { app: [ 'webpack-dev-server/client?http://localhost:8080/', './src/js/index.js' ] }, output: { path: './dist/js', filename: 'bundle.js' } }
這樣就完成了將 inlinedJS 打包進 bundle.js 里的功能，同時 inlinedJS 里面也包含了 socket.io 的 client 代碼，可以和 webpack-dev-server 進行 websocket 通訊。
當然你也可以直接在你 index.html 引入這部分代碼:
<script src="http://localhost:8080/webpack-dev-server.js"></script>
不過 Iframe mode 和 Inline mode 最后達到的效果都是一樣的，都是監聽文件的變化，然后再將編譯后的文件推送到前端，完成頁面的 reload 的。
Iframe mode
Iframe mode 下 cmd line 不需要添加其他的內容，瀏覽器訪問的路徑是:
localhost:8080/webpack-dev-server/index.html。
這個時候這個頁面的 header部分 會出現整個 reload消息 的狀態。當時改變源文件的時候，即可以完成自動編譯打包，頁面自動刷新的功能。
Inline mode
使用 inline mode 的時候， cmd line 需要寫成：
webpack-dev-server --inline --content-base ./dist
這個時候訪問的路徑是:
localhost:8080/index.html
也能完成自動編譯打包，頁面自動刷新的功能。但是沒有的 header 部分的 reload 消息的顯示，不過在控制台中會顯示 reload 的狀態。
Hot Module Replacement
開啟 Hot Module Replacemen t功能，在 cmd line 里面添加 --hot
webpack-dev-server --hot --inline --content-base ./dist
其他配置選項
--quiet 控制台中不輸出打包的信息
--compress 開啟gzip壓縮 --progress 顯示打包的進度
還有一切其他的配置信息可以查閱官方文檔:
這是我的 package.json 的文件：
{
"name": "reptile", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base ./dist", "build": "webpack --progress --colors" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.13.2", "babel-loader": "^6.2.5", "babel-preset-es2015": "^6.13.2", "babel-preset-react": "^6.11.1", "css-loader": "^0.23.1", "react": "^15.3.1", "react-dom": "^15.3.1", "style-loader": "^0.13.1", "webpack": "^1.13.2", "webpack-dev-server": "^1.14.1" } }
首先命令行：輸入 npm install 所有依賴。然后輸入 npm run dev 。在瀏覽器中打開localhost:8080/index.html，然后就可以愉快的開發咯。
如果對 web-dev-server 還有其他問題的話，請留言告知。