webpack-dev-server 上手体验

webpack-dev-server 是一个webpack微型测试服务器

安装

1. 在终端中进入项目目录下，敲下npm install webpack-dev-server --save-dev回车
2. node_modules/.bin/webpack-dev-server(网上有的说直接输webpack-dev-server那是错的)
   3.启动成功会输出服务器url地址信息
   3.webpack打包和webpack-dev-server开启服务的区别——
   webpack输出真实的文件，而webpack-dev-server输出的文件只存在于内存中,不输出真实的文件！

配置属性

1. devServer.contentBase：指定了服务器资源的根目录，如果不写入contentBase的值，那么contentBase默认是项目的目录。
2. devServer.port：设置端口号为7000
3. devServer.host：设置主机号
4. devServer.historyApiFallback：在文档里面说的很清楚，这个配置属性是用来应对返回404页面时定向到特定页面用的

historyApiFallback: {
     disableDotRule: true,
      rewrites: [
        { from: /^\/$/, to: '/views/landing.html' },
        { from: /^\/subpage/, to: '/views/subpage.html' },
        { from: /./, to: '/views/404.html' }
      ]
    }

5. devServer.overlay 这个配置属性用来在编译出错的时候，在浏览器页面上显示错误，默认是false，true浏览器上把错误显示出来了
6. devServer.stats：这个配置属性用来控制编译的时候shell上的输出内容（‘none’ | ‘errors-only’ | ‘minimal’ | ‘normal’ | ‘verbose’）
7. devServer.quiet：当它被设置为true的时候，控制台只输出第一次编译的信息，当你保存后再次编译的时候不会输出任何内容，包括错误和警告
8. devServer.compress：这是一个布尔型的值，当它被设置为true的时候对所有的服务器资源采用gzip压缩

webpack-dev-server的自动刷新和模块热替换机制

• 自动刷新: 当我们对业务代码做了一些修改然后保存后（command+s），页面会自动刷新，我们所做的修改会直接同步到页面上，而不需要我们刷新页面，或重新开启服务
  （The webpack-dev-server supports multiple modes to automatically refresh the page）
• 从内部角度看——模块热替换：在热替换（HMR）机制里，不是重载整个页面，HMR程序会只加载被更新的那一部分模块，然后将其注入到运行中的APP中

webpack-dev-server有两种模式可以实现自动刷新和模块热替换机制

1. Iframe mode：页面被嵌入在一个iframe里面，并且在模块变化的时候重载页面
2. inline mode：添加到bundle.js中
   当刷新页面的时候，一个小型的客户端被添加到webpack.config.js的入口文件中
   例如在我们的例子中，在使用inline mode的热替换后，相当于入口文件从

app:[path.join(__dirname,'src','index.js'),
             'webpack-dev-server/client?http://localhost:8080/'
          ]

如何实现

1. 在配置中写入devServer.hot：true和devServer.inline：true
2. 增加一个插件配置webpack.HotModuleReplacementPlugin()

var webpack = require('webpack')
module.exports = {
  /*省略entry ,output等内容*/
  plugins:[
       new webpack.HotModuleReplacementPlugin()
   ],
  devServer: {
       inline:true,
       hot:true
   }
}

使用纯node的API实现

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, {
       /*我们写入配置的地方*/
});
server.listen(8080);