webpack-dev-горячая перезагрузка сервера не работает

моя структура файла:

dist
  css
    style.css
  index.html
  js
    bundle.js
src
  css
    style.css
  index.html
  js
    main.js
node_modules
webpack.config.js
package.json

мой webpack.конфиг.js выглядит так:

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: __dirname,
        filename: './dist/js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /.js$/,
                exclude: /(node_modules)/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /.vue$/,
                loader: 'vue'
            }
        ]
    }
};

Я бегу:

webpack-dev-server --content-base dist --hot

и он строит и кажется, что он работает. localhost: 8080 показывает ожидаемый результат, но горячая перезагрузка просто не работает. Когда я меняю файл, я вижу в терминале, что происходит перестройка, но ничего не происходит в браузере. Я что-то пропустил в конфигурации?

9
javascript node.js vue.js webpack

7 ответов

при использовании webpack-dev-server, он строит все файлы внутри и не выплюнуть их в свой выходной путь. Бег!--2--> один, без dev-сервера, выполняет фактическую компиляцию на диск. Сервер dev делает все в памяти, что ускоряет повторную компиляцию на много.

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

вот так:

webpack-dev-server --content-base src --hot --inline
14

что сработало для меня, так это написать <script src="bundle.js">, а не <script src="dist/bundle.js"> в своем .

// index.html
<script src="bundle.js"></script>      // works
<script src="dist/bundle.js"></script> // doesn't work!

содержание dist/bundle.js поскольку выходной файл работает отлично, если вы просто создадите его с помощью webpack. Но при использовании webpack-dev-server, статический файл уже в файловой системе продолжает обслуживаться, а не последняя горячая замена. Кажется webpack-dev-server путается, когда видит dist/bundle.js в html-файле и не заменяет его, Хотя webpack.config.js настроен на этот путь.

13

-- inline --hot не было проблемой для меня

Если вы используете redux можете попробовать это.

по какой-то случайной причине redux-devtools не разрешал горячую перезагрузку для меня. Попробуйте удалить его из корневого компонента и redux compose config.

Примечание: используйте расширение браузера redux devtool с этой конфигурацией в конфигурации вашего магазина:window.devToolsExtension ? window.devToolsExtension() : f => f

кроме того, необходимо прочитать: https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.ejpsmve8f

или попробуйте горячую перезагрузку 3: пример: https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915

1

горячая перезагрузка Webpack перестала работать и для меня. Решением для меня было удалить node_modules папка и свежая установка всех зависимостей. Просто откройте родительскую папку node_modules в вашем терминале и запустите npm install

1

попробуйте это:

в своем package.json файл, удалите строку, содержащую "test" "echo \"Error: no test specified\" && exit 1" под объектом scripts и замените его на:

...
"scripts": {
    "start": "webpack-dev-server --hot"
  },

...

затем, чтобы перезапустить проект, просто используйте npm start.

это работало для меня, когда я столкнулся с этой проблемой.

Edit: можете ли вы поделиться своим ?

попробуйте добавить это в webpack.конфиг.JS а также

devServer: {
  inline: true,
  port: 3000,
  hot: true
},
0

Проверьте журналы консоли, если он имеет ниже ошибку, а затем добавьте cors в файл webpack dev server

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin react hot reload

идеально добавить ниже запись в вас dev server js

headers: { "Access-Control-Allow-Origin": "*" },
0

100% Рабочий Раствор

вы должны просто выполнить 3 шага, и вы получите горячую перезагрузку, как вы ожидали

  1. включить ключ "publicPath"в свойство" Output " конфигурации webpack. "publicPath"должен содержать путь к вашему пакету.JS-файл, чтобы dev-сервер знал, есть ли какие-либо изменения в вашем пакете.JS файл и он будет перезагрузить приложение.

ваша конфигурация должна выглядеть так - 

output: {
   path: __dirname,
   publicPath:"/dist/js/",
   filename: './dist/js/bundle.js'
}
  1. добавить опцию "devServer" в конфигурационный файл -
devServer:{
   contentBase:"/src/",
   inline:true,
   stats:"errors-only"
}

обратите внимание:contentBase должен указывать на путь, куда вы помещаете свой индекс.html-файл, который содержит ваш тег скрипта в вашем случае это будет " / src/"

  1. наконец, вы должны убедиться, что атрибут " src "вашего тега "script"в индексе.html указывает на bundle.Яш, начиная с "http://localhost:port" как следовать -

<script src="http://localhost:portnumber + value in publicPath + bundle.js"></script>

в вашем случае это будет выглядеть так - 

<script src="http://localhost:8080/js/dist/bundle.js" type="text/javascript"></script>

и, наконец, помните webpack-dev-server doesn't compile your js file or make build or watch on your js файл он дозирует все в памяти, чтобы посмотреть на ваш JS-файл, который вы должны запустить webpack --watch в отдельным окне

0