Как перекомпилировать webpack после смены файлов?

Я использую webpack с двумя точками входа:

entry: {
  js: './assets/index.js',
  css: './assets/sass/all.scss'
},

Я хочу настроить его, поэтому, когда я scss файл js или scss он снова запускает webpack.

Я попытался использовать webpack-dev-server с командой:

webpack-dev-server --hot

Похоже, что он строит снова, он выводит сообщение

webpack: bundle теперь VALID.

Однако, если я пытаюсь обновить браузер, я не вижу изменений. (Кэш отключен при использовании инструментов dev и Ctrl + F5). Перезапуск узла также не работает, это похоже на сборку в другом месте, а не на сконфигурированный выходной файл:

output: {
  path: path.join(__dirname, '/public'),
  filename: 'bundle.js'

Ответ 1

Если вы хотите, чтобы webpack наблюдал за изменениями, просто используйте флаг watch:

webpack --watch

С помощью этой опции webpack будет следить за изменениями и перекомпилировать.

Ответ 2

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

Вы можете проверить это, изменив путь к localhost: 8080/webpack-dev-server/bundle.js в вашем html файле, и если вы запустите сервер webpack-dev, изменения должны появиться.

Правильный способ справиться с этим - обновить свой webpack.config.js с помощью свойства publicPath:

output: {
    path: path.join(__dirname, '/public'),
    filename: 'bundle.js',
    publicPath: "/public/"
}

В этом случае тег сценария должен ссылаться на src= "public/bundle.js".

Больше информации

Ответ 3

Вы можете просмотреть документацию по webpack (https://webpack.github.io/docs/tutorials/getting-started/#watch-mode), чтобы узнать о режиме просмотра веб-пакета.