webpack-dev-server 熱替換配置詳解

webpack-dev-server 配置在官網已經很詳細了
http://webpack.github.io/docs...
仍是簡單的總結和整理一下！！！
webpack-dev-server 提供兩種模式的熱替換

• iframe

• inline
  這兩種的區別官網上有說明：

Iframe mode
To use the iframe mode no additional configuration is needed. Just navigate the browser to 
http://<host>:<port>/webpack-dev-server/<path>. 
I. e. with the above configuration http://localhost:8080/webpack-dev-server/index.html.

  * No configuration change needed.
  * Nice information bar on top of your app.
  * Url changes in the app are not reflected in the browsers url bar.


Inline mode
To use the inline mode, specify --inline on the command line 
(you cannot specify it in the configuration). 
This adds the webpack-dev-server client entry point to the webpack configuration. 
There is no change in the url required. Just navigate to http://<host>:<port>/<path>.
 I. e. with the above configuration http://localhost:8080/index.html.

  * Command line flag needed.
  * Status information in the browser log.
  * Url changes in the app are reflected in the browsers url bar.

接下來講如下比較重要的事情，webpack-dev-server 有兩種使用模式：

• commond line (命令行)

• nodejs

命令行模式比較簡單，只須要在啓動的時候增長對應的參數便可

• iframe 熱替換模式：

  webpack-dev-server --hot

• inline 熱替換模式:

  webpack-dev-server --hot --inline

特別須要注意不須要如下配置（發現不少人都亂寫，不過也能正常啓動就是，由於命令行模式啓動，webpack-dev-server 會自動給entry添加webpack-dev-server運行時）

• entry 不須要增長頭（webpack-dev-server 自動會添加）

entry: {
    "index":[
        //'webpack-dev-server/client?http://localhost:8080',
        //'webpack/hot/dev-server'
    ]
}

Node模式下inline模式的熱替換配置比較複雜：

/*
 * new webpackDevServer這種模式，就是node環境下使用了。
 */
var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
     hot:true
     //...
    
});
server.listen(8080);

• 須要在entry中加入運行時：

entry: {
    "index":[
        //'webpack-dev-server/client?http://localhost:8080',
        //'webpack/hot/dev-server'
    ]
}

• 須要添加HotModuleReplacementPlugin 插件

plugins:[
    //new webpack.HotModuleReplacementPlugin()
];

• 另一個很是重要，須要配置publishPath路徑

output: {
        path: __dirname+"/dist",
        filename: "[name].bundle.js",
        publicPath: "http://localhost:8080/dist/"
},

• 還要增長 hot:true 配置

var server = new webpackDevServer(compiler, {
     hot:true,
     publicPath:config.output.publicPath


     //...
    
});

webpack-dev-server 配置就這樣完了，只要靜下心來看webpack-dev-server 官網的說明，其實挺簡單的。BAY！！！