webpack/hot/only-dev-server 报错

问题描述

问 题

entry 中使用 webpack/hot/only-dev-server 打包报错，没有刷新页面，错误信息是

The following modules couldn't be hot updated: (They would need a full reload!)

测试代码是这样的

// t.js
module.exports = () => {
    console.log(33123);
};


// entry.js
import test from './test/t.js';
test();

修改 t.js 后，webpack 热加载不了

解决方案

参考配置：

webpack.config.js:

  entry: [
    'webpack-hot-middleware/client',
    './entry.js'
  ],

entry.js加上这段代码

if (module.hot) {
  module.hot.accept();
}

补充答案 (个人见解，有误请指出)：

1.其实webpack-dev-server和Hot Module Replacement(HMR)是两个分开的功能，并不是加上--hot就能热替换。

2.启动服务时加上--hot或者配置hot:true的结果都是往plugin里添加new webpack.HotModuleReplacementPlugin(), 即：

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

所以这三种方式都可以让webpack支持HMR的功能。

3.官方文档里说了HMR is opt-in，说白了就是它只是提供了一些接口给你，至于怎么个替换要你自己来写代码咯，但只有被accept的代码才能进行热替换，所以react有react-hot-loader, vue有vue-loader，这些插件已经包含了热替换的相关代码。

4.所以解决方法就是accept你的模块，让它能够进行热替换，也就是上面的代码。如果你不想手动去做，这里有个小插件

相关阅读：
Webpack 用来做模块热替换(hot module replacement)
HMR doc

这篇关于webpack/hot/only-dev-server 报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！