Как обратиться к файлу в twig шаблоне?

Question

[fisherspoons]

Всем привет, столкнулся с проблемой, есть проект на webpack, есть необходимость использовать twig шаблоны. И есть необходимость вставлять самому нужные js/css файлы в нужные мне позиции на странице, отключив функцию inject,
имена файлов содержат динамические хеши.

new HtmlWebpackPlugin({
      hash: false,
      template: `/index.html.twig`,
      filename: `/index.html.twig`,
      inject: false
    }),

    new MiniCssExtractPlugin({
      filename: `css/[name].[contenthash].css`,
    }),

Но есть НО, если раньше при использовании обычного html файла я мог обратиться к файлу вот так

new HtmlWebpackPlugin({
      hash: false,
      template: `/index.html`,
      filename: `/index.html`,
      inject: false
    }),

     <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.chunks.base.css %>">
     <script async src="<%= htmlWebpackPlugin.files.chunks.vendors.entry %>"></script>

То в twig файле такая запись не катит, если кто-то сталкивался с подобным, буду весьма обязан

Comments

[svm]

Разобрались с вопросом или нет? Я недавно делал подобное в blade шаблонах. twig, как я понял, это что-то похожее. Если нужно, дайте знать. Напишу.

[fisherspoons]

svm, Добрый день, оставил в html ту же конструкцию, а htmlwebpackplugin сделал перегон в twig файлы

new HtmlWebpackPlugin({
        hash: false,
        template: `${PATHS.src}/search-results.html`,
        filename: `${PATHS.templateSrc}/search.html.twig`,
        inject: false,
        minify: {
          collapseWhitespace: true
        }
      }),

на выходе в twig файлах вроде все как нужно.

Напишите свое решение, хотелось бы сразу работать в twig файлах

Answer 1

[svm]

Пишу свое решение для blade шаблонизатора, но пугаться не надо, там то же самое, просто конструкции другие.

webpack.config.js:

new HtmlWebpackPlugin({
            template: "resources/js/template_vanilla.ejs",
            filename: path.resolve(__dirname, 'resources/views/inline/vanilla.blade.php'),
            inject: false,
            publicPath: '/assets',
        }),

template_vanilla.ejs:

<% let styles = htmlWebpackPlugin.files.css; %>
<% let scripts = htmlWebpackPlugin.files.js; %>

<% for (let style of styles) { %>
    <link rel="stylesheet" href="<%= style %>">
<% } %>

<% for (let script of scripts) { %>
    <script src="<%= script %>"></script>
<% } %>

После выполнения в resources/views/inline/vanilla.blade.php будет следующий код:

<script src="/assets/js.ebb3174236087eacfa7b.bundle.js"></script>

который можно подключить обычной конструкцией
В моем случае это будет @include('inline.vanilla')
В вашем, наверно {% include 'resources/views/inline/vanilla.blade.php' %}
По сути, только имена файлов поменять на нужные вам остается.

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

Comments

[svm]

У вас практически то же самое, если не смотреть в шаблон для htmlWebpackPlugin. Лучше уже не сделать.

[fisherspoons]

svm, Спасибо за инфу