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

内容简介：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

:warning:经测试在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都可以使用。

示例代码

示例代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

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

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。