webpack-dev-server 配置在官网已经很详细了

• iframe

• inline

  这两种的区别官网上有说明：

Iframe modeTo use the iframe mode no additional configuration is needed. Just navigate the browser to http://
    
     :
     
      /webpack-dev-server/
      
       . 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 modeTo 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://
       
        :
        
         /
         
          . 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！！！