webpack学习（三）：webpack-dev-server以及HMR

webpack-dev-server

what？

webpack-dev-server提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)，能够用于快速开发应用程序

use？

首先使用npm进行安装：

npm install --save-dev webpack-dev-server

然后，在webpack配置文件中，添加devServer：

    devServer:{
        host: 'localhost',  											// 服务主机号
        port: 8090, 													// 服务端口号，可以按需要改
        inline: true,											
        hot: true,                                                  // 启用HMR 
        contentBase: path.resolve(__dirname,'../build'),            // 告诉服务器从哪里提供内容
        compress: true												   // 一切服务都启用gzip 压缩
    }

另外还要解释一下inline：
在 dev-server 的两种不同模式之间切换。默认情况下，应用程序启用内联模式(inline mode)。这意味着一段处理实时重载的脚本被插入到你的包(bundle)中，并且构建消息将会出现在浏览器控制台。
也可以使用 iframe 模式，它在通知栏下面使用 iframe 标签，包含了关于构建的消息。切换到 iframe 模式

    inline: false,											

接下来就是在package.json中定义一下dev的命令了

    "dev": "webpack-dev-server --open",									

再扩展一点，我们在定义主机号的时候，可以设置为“0.0.0.0”，理由是这样设置之后我们既可以通过localhost（本地访问），也可以通过IP访问，比较方便（移动端开发的时候用手机访问同一网络，可以通过IP访问调试）。
当然，这样设置完我们设置open的时候（启动服务后自动在浏览器打开），会发现默认打开的http:// 0.0.0.0:8080这样的网址是打不开的，这时候我们可以在dev命令中进行如下修改：

    "dev": "webpack-dev-server --open --public localhost:8090",	

意思是：
当使用内联模式(inline mode)并代理 dev-server 时，内联的客户端脚本并不总是知道要连接到什么地方。它会尝试根据 window.location 来猜测服务器的 URL，但是如果失败，你需要这样，去告知本地浏览器“打开public中定义的就行了”

HMR

what？

HMR便是模块热替换(HMR - Hot Module Replacement)，该功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。

use？

启用此功能实际上相当简单。而我们要做的，就是更新 webpack-dev-server 的配置，和使用 webpack 内置的 HMR 插件
首先引入webpack：

const webpack = require('webpack');								

然后在plugins启用功能：

new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()							

注意，我们还添加了 NamedModulesPlugin，以便更容易查看要修补(patch)的依赖
现在，我们来修改 入口文件（main.js），以便当 引用的文件(app.js) 内部发生变更时可以告诉 webpack 接受更新的模块。

if (module.hot) {
   module.hot.accept('./app.js', function() {
       console.log('Accepting the updated printMe module!');
       // 引入的文件的操作
       // ........
   })
}					

关于样式表的修改也实现热替换：
借助于 style-loader 的帮助，css的模块热替换实际上是相当简单的。当更新 css 依赖模块时，此 loader 在后台使用 module.hot.accept 来修补(patch) style 标签。因此我们只需要在css的rules中使用’style-loader’，‘css-loader’，并在入口js文件中导入样式文件就可以了
最后，我们可以通过在命令行中运行 npm run dev来启动并运行 dev server，运行结果如下：

修改源文件，发现能正常修改，本次学习和测试告一段落~~~