webpack-dev-server 中 inline 和 HMR 的区别

webpack-dev-server

webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-server发送关于编译状态的消息到客户端，客户端根据消息作出响应

简单来说，webpack-dev-server就是一个小型的静态文件服务器。使用它，可以为webpack打包生成的资源文件提供Web服务

inline和hot的功能上的区别

hot

webpac-dev-server支持Hot Module Replacement，即模块热替换，在前端代码变动的时候无需整个刷新页面，只把变化的部分替换掉。

inline

inline选项会为入口页面添加“热加载”功能，即代码改变后重新加载页面。

// 1. 不会刷新浏览器
$ webpack-dev-server
//2. 刷新浏览器
$ webpack-dev-server --inline
//3. 重新加载改变的部分，不会刷新页面
$ webpack-dev-server --hot
//4. 重新加载改变的部分，HRM失败则刷新页面
$ webpack-dev-server  --inline --hot复制代码

⚠️经测试在webpack2中使用inline和hot都不需要在配置时(webpack.config.js中)添加参数为true，即下面的代码是多余的

devServer: {
    contentBase: path.resolve(__dirname, './src'),
    port: 1024,
    hot: true,        // 不需要
    inline: true,     // 不需要
},复制代码

inline和hot使用上的区别

inline

只需在命令行加入--line选项即可。例如：

webpack-dev-server --inline复制代码

hot

1. 需要在命令行加入--hot选项：

   webpack-dev-server --hot复制代码

2. 需要在入口处加上如下代码

   if(module.hot){
    module.hot.accept()
   }复制代码

可以在控制台看到如下输出：

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.复制代码

对chunkhash和hash的支持

webpack的hash字段是根据每次编译compilation的内容计算所得，也可以理解为项目总体文件的hash值，而不是针对每个具体文件的。

chunkhash是根据模块内容计算出的hash值。

当使用--hot参数时，只能使用hash，如果使用chunkhash会报错：

output: {
    path: path.resolve(__dirname, './output'),
    // filename: '[name].[chunkhash:8].bundle.js',      // 会报错
    filename: '[name].[hash:8].bundle.js',
},复制代码

在使用--inline时，hash和chunkhash都可以使用。

示例代码

示例代码