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！！！