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

Question

我在开发工具控制台中两次收到类似[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"

Answer 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服务”时，我遇到了这个问题。

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

Answer 2

在index.html中有这一行。

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

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

您正在其中加载的（旧）版本的React也是如此，因为React已包含在捆绑包中。

Answer 3

单击按钮时HMR不起作用，该按钮是这样的：

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

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

remove any hot thing from webpack config

我希望这对您有用。