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

Question

我在Dev Tools控制台中收到类似于[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"。

- Jan Chalupa

---

可能是我的所有代码在Webpack编译时都运行了两次的重复问题。 - Maciej Goszczycki

@mgoszcz2 这不是我的情况。 - Jan Chalupa

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

Answer 1

在您的index.html文件中有这行代码：

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

然而，html-webpack-plugin将添加另一行代码，执行了整个应用程序的两次加载，因此您需要删除该行代码。

同样的道理也适用于您加载其中的(旧)React版本，因为React已经在捆绑包中了。

- Rakasiwi Surya

---

做到了，谢谢！ - Ivan Hanák

Answer 2

我通过在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'后，遇到了这个问题。

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

- John Waring

---

我认为我的解决方案只适用于Vue.js，而且我认为它对OP没有帮助。 - John Waring

Answer 3

当我点击一个按钮时，HMR不起作用，这个按钮长这样：

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

删除 href 属性，HMR 现在可以工作了。

remove any hot thing from webpack config

希望这对你有用。

- Raghul SK