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

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.config.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 показывает ожидаемый результат, но горячая перезагрузка просто не работает. Когда я изменяю файл, я вижу в терминале, что происходит восстановление, но в браузере ничего не происходит. Я что-то упустил в конфиге?

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

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

Вот так:

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

Для меня работало написать {amp}lt;script src="bundle.js"{amp}gt; а не {amp}lt;script src="dist/bundle.js"{amp}gt; в моем файле index.html .

 // index.html {amp}lt;script src="bundle.js"{amp}gt;{amp}lt;/script{amp}gt; // works {amp}lt;script src="dist/bundle.js"{amp}gt;{amp}lt;/script{amp}gt; // doesn't work! 

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

Ни один из вариантов на этой странице не работал для меня. После изменения раздела devServer на:

 devServer: { port: 8080, contentBase: ['./src', './public'], // both src and output dirs inline: true, hot: true }, 

это сработало.

—inline —Hhot не было проблемой для меня

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

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

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

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

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

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

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

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

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

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

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

Изменить: Можете ли вы поделиться своим файлом package.json ?

Попробуйте также добавить это в webpack.config.js

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

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

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

В идеале добавьте следующую запись в ваш сервер разработки JS

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

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

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

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

Ваш конфиг должен выглядеть так —

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

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

  1. Наконец, вы должны убедиться, что атрибут ‘src’ вашего тега ‘script’ в index.html указывает на bundle.js, начиная с » http: // localhost: port «, как показано ниже —

{amp}lt;script src="https://localhost:portnumber value in publicPath bundle.js"{amp}gt;{amp}lt;/script{amp}gt;

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

 {amp}lt;script src="https://localhost:8080/js/dist/bundle.js" type="text/javascript"{amp}gt;{amp}lt;/script{amp}gt; 

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

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

 echo fs.inotify.max_user_watches=1999999 | sudo tee -a /etc/sysctl.conf {amp}amp;{amp}amp; sudo sysctl -p 

источник