Webpack - [HMR] и [WDS] запускаются дважды

Я дважды получаю сообщения типа [HMR] Waiting for update signal from WDS... и [WDS] Hot Module Replacement enabled. в консоли Dev Tools. Это почему? Я делаю что-то неправильно?

Мой файл 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"

Возможный дубликат Весь мой код запускается дважды при компиляции Webpack

— 07.01.2019 01:53

@ mgoszcz2 Это не моя ситуация.

— 07.01.2019 08:52

Не моя ситуация тоже, с такой же проблемой :(

— 16.05.2019 01:38

Такая же проблема здесь

— 29.06.2019 13:42

Я могу подтвердить, что он загружает код дважды, потому что операторы журнала консоли на верхнем уровне также будут печататься дважды.

— 29.06.2019 13:43

javascript webpack webpack-dev-server webpack-hmr

07.01.2019 00:40

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 903

Ответы 3

Я решил эту проблему, удалив строку автоматического впрыска в 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 для его статического обслуживания. Когда я перешел на использование исключительно vue-cli-service serve, я столкнулся с этой проблемой.

Надеюсь, эта информация кому-то будет полезна.

Я думаю, что мое решение эксклюзивно для Vue.js, и я не думаю, что оно помогает OP.

— 30.06.2020 11:39

30.06.2020 11:36

HMR не работает, когда я нажимаю кнопку, кнопка такая:

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

Удалите атрибут href, теперь HMR работает. или

remove any hot thing from webpack config

Надеюсь, это будет вам полезно.

02.07.2020 09:13

У вас есть эта строка в вашем index.html.

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

Однако html-webpack-plugin добавит еще одну строку, которая делает то же самое, поэтому вы запускаете все приложение дважды. Вы захотите удалить эту строку.

То же самое касается (старой) версии React, которую вы загружаете, поскольку React уже находится в пакете.

25.07.2020 17:41