webpack-dev-server热更新问题

问题描述

问 题

在修改过js后，会出现这种警告

大意就是无法热更新，需要刷新页面。随后浏览器会自动刷新。

我想知道如何避免这种警告的出现。（就是不报警告的情况下自动刷新）

这是我的入口文件配置：

var getConfig = require("./config");

/*
* env.type dev为开发环境，pro为正式环境
* */
if (module.hot) {
    module.hot.accept()
}
module.exports = function (env) {
    var config = getConfig(env.type);
    var mainObj;
    mainObj = {
        entry: config.entry,
        output: config.output,
        module: config.module,
        resolve:config.resolve,
        plugins: config.plugins
    };
    if(config.isDev){
        mainObj.devServer = config.devServer;
    }else{
        mainObj.devtool = config.devtool;
    }
    return mainObj;
};

解决方案

主要原因是webpack不知道如何应用patch，所以需要在代码里面告诉webpack。

在webpack入口文件 最后面 或 最前面 或 需要热更新的地方 加上

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

入口文件指webpack.config.js里面entry的值对应的文件

这篇关于webpack-dev-server热更新问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！