webpack的devServer配置错误

首先声明，之前vue项目没有报错，做react项目这样配置就报错了。

一、问题描述

[HMR] Hot Module Replacement is disabled.

二、问题分析

不太理解控制台为什么说热更新失效，然后页面出不来？还原现场。

devServer: {
        historyApiFallback: true,
        open: true,
        hot: true,
        inline: true,
        overlay: true
}

三、解决方案

1、webpack.dev.config.js

devServer: {
        historyApiFallback: true,
        open: true,
        overlay: true
}

2、package.json

"scripts": {
        "dev": "webpack-dev-server --hot --inline --config webpack.dev.config.js",
        "test": "echo \"Error: no test specified\" && exit 1"
    },

也就是说，不要在配置里面加hot和inline，要在命令行加。

四、答疑解惑

因为我在react项目中没有加热模块更新插件，如果加了下面的插件项，就可以只在webpack配置文件中指定devServer了，不用在命令行写。总之，这和react还是vue没有关系，这是webpack配置文件是否正确的问题。

new webpack.HotModuleReplacementPlugin()

秒客网

webpack的devServer配置错误

相关文章