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均可以使用。

示例代码

示例代码