Как выводить .html на диск с помощью Webpack-dev-сервера и HTML-webpack-plugin

Question

Я использую webpack и html-webpack-plugin для обновления моего файла index.html сгенерированным набором скриптов, например bundle.[hash].js.

Затем мне нужно запустить webpack-dev-server, чтобы я мог загрузить этот комплект в память и воспользоваться возможностью замены Hot Mod.

Это делает код компиляцией дважды.

Однако то, что я хотел бы для webpack-dev-server также иметь возможность обновить файл index.html с новым bundle.[hash].js, потому что теперь я должен бежать webpack с последующим webpack-dev-sever. Кажется странным компилировать дважды.

Опять же, единственная причина, по которой я запустил webpack, - это получить файл index.html с новым хешем пакета. Если бы я смог получить webpack-dev-server для вывода обновленного index.html на диск, я мог бы вообще удалить команду webpack.

Возможно ли это? Если да, то как изменится конфигурация webpack? Моя конфигурация webpack очень длинная, поэтому я не думал, что это поможет опубликовать ее здесь.

Answer 1

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

вы могли бы иметь три файлы конфигурации webpack, скажем webpack.common.js, webpack.dev.js и webpack.prod.js.

webpack.common.js содержит общие конфигурации, которые могут быть объединены с другими конфигурациями с помощью webpack-merge

webpack.dev.js используется для webpack-dev-server и выходной файл должен быть bundle.js

webpack.prod.js используется для производства, а выходное имя файла должно быть bundle.[hash].js

, то вы можете просто запустить webpack-dev-server webpack.dev.js

Answer 2

Я думаю, что это именно то, что вам нужно: https://github.com/jantimon/html-webpack-harddisk-plugin

webpack-dev-server сохраняет обновленный HTML в памяти. С помощью этого плагина он также будет записывать его в файловую систему.