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

Posted 2023-03-06

【中文标题】Webpack - [HMR] 和 [WDS] 触发两次

【英文标题】：Webpack - [HMR] and [WDS] firing twice

【发布时间】：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 这不是我的情况。

不是我的情况，有同样的问题:(

同样的问题

我可以确认它会加载两次代码，因为顶层的控制台日志语句也会打印两次。

【参考方案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

希望对你有用。