Страницы

Поиск по вопросам

пятница, 12 июля 2019 г.

Как подключать файлы к проекту,после сборки с помощью webpack, если в названии прописывается hash?

Задача при каждой сборки бандлов с помощью webpack, дописывать в названия бандлов со стилями и js хэш.Собственно говоря, сделать это не сложно. В конфиге надо просто прописать что-то типа:
output: { filename: '[name]-[hash:6].min.js', path: BUILD_DIR + '/js' },
new ExtractTextPlugin({ filename: "../css/style-[hash:6].min.css", disable: false, allChunks: true }),
Но возникает проблема. В проекте эти бандлы подключаются в twig и там я указываю путь и название файла. Без хеша как мы видим style.min.css и в head шаблона я пишу "assets/css/style.min.css" Теперь же webpack получается, каждый раз генерирует новые имена, например style-b826d0.min.css, добавляетв название хеш. И разумеется стили не подтягиваются. По сути надо каждый раз менять имя файла, т.к. хеш будет меняться. Как решить данную проблему, чтобы новый бандл с новым именем автоматически подтягивался в проект??


Ответ

Итак, ларчик просто открывался. в Твиге можно подборосить html-ку вот так Также надо использовать вебпаковский HtmlWebpackPlugin, указываем пути и направялем html в папку с твигом, куда мы будем его инклудить(почему-то если их арсположить отдельно, twig ругается). Ну а дальше, если пути к js и css бандлов заданы верно, то вебпак подставит бандлы с хешем в названии как надо. В моем случае я генерировал html на основе существующего html-шаблона,но можно это сделатьи без шаблона
new HtmlWebpackPlugin({ title: ' My title ', template: './templates/index.html', filename: '../../tiwg_template/index.html' }),

Комментариев нет:

Отправить комментарий