Webpack - [HMR] 和 [WDS] 触发两次答案

【问题标题】：Webpack - [HMR] and [WDS] firing twiceWebpack - [HMR] 和 [WDS] 触发两次
【发布时间】：2019-06-01 16:15:41
【问题描述】：

我在开发工具控制台中收到了两次类似[HMR] Waiting for update signal from WDS... 和[WDS] Hot Module Replacement enabled. 的消息。这是为什么？我做错了吗？

我的webpack.config.js 文件：

...
module.exports = () => {
    return {
        entry: {
            bundle: './src/app/App.jsx',
            sw: './src/app/sw.js'
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, 'dist'),
            globalObject: 'this'
        },
        devtool: 'source-map',
        devServer: {
            contentBase: path.resolve(__dirname, 'dist'),
            historyApiFallback: true
        },
...
        node: {
            fs: 'empty',
            net: 'empty',
            tls: 'empty'
        }
    };
};

版本："webpack": "^4.27.1"、"react-hot-loader": "^4.6.0"、"webpack-dev-server": "^3.1.10"

【问题讨论】：

All my code runs twice when compiled by Webpack的可能重复
@mgoszcz2 这不是我的情况。
不是我的情况，有同样的问题:(
同样的问题
我可以确认它会加载两次代码，因为顶层的控制台日志语句也会打印两次。

标签： javascript webpack webpack-dev-server webpack-hmr

【解决方案1】：

我通过删除 public/index.html 中的自动注入行解决了这个问题：

    <div id="app"></div>
<!-- built files will be auto injected -->
<!-- <script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script> -->

以前我正在构建 vue 站点并使用 nodejs express 服务器静态地为其提供服务。当我改为使用 'vue-cli-service serve' 时，我遇到了这个问题。

我希望这些信息对某人有所帮助。

【讨论】：

我认为我的解决方案是 Vue.js 独有的，我认为它对 OP 没有帮助。

【解决方案2】：

您的 index.html 中有这一行。

<script src="/bundle.js"></script>

但是，html-webpack-plugin 将添加另一行相同的功能，因此您将运行整个应用程序两次。您将要删除该行。

对于您正在加载的（旧）版本的 React 也是如此，因为 React 已经在包中。

【讨论】：

【解决方案3】：

点击按钮时HMR不工作，按钮是这样的：

<a href="javascript:;" @click="start">Click!</a>

删除 href 属性，HMR 正在工作。或

remove any hot thing from webpack config

希望对你有用。

【讨论】：