Передать переменные из html-webpack-plugin в шаблон pug

Можно ли передать переменную в шаблон.pug, загруженный "pug-html-loader", который я определил ранее в "html-webpack-plugin"?

webpack.config.babel.js

...

{
  test: /\.pug$/,
  use: [
      {
          loader: 'html-loader'
      },
      {
          loader: 'pug-html-loader',
          options: {
              self: true
          }
      }]
}


...

 plugins: [

        new HtmlWebpackPlugin({
            chunks: ['index'],
            filename: 'index.html',
            template: './src/templates/layout.pug',
            title: 'Welcome',
            file: 'index'
        }),

        new HtmlWebpackPlugin({
            chunks: ['index', 'contact'],
            filename: 'contact.html',
            template: './src/templates/layout.pug',
            title: 'Contact us',
            file: 'contact'
        }),

]

В layout.html я определил следующее:

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>

<main>
    ${ require('html-loader!../partials/' + htmlWebpackPlugin.options.file + '.html' ) }
</main>

</body>
</html>

Как я могу использовать его для передачи всех переменных, определенных в плагине Webpack для использования в моих PugTemplates и файлах? Предполагается, что приложение представляет собой простой процесс создания простых веб-страниц, который состоит из нескольких статических страниц.

Источник

5 ответов

Для тех, кто затрудняется ответить. Решение - создать templateGenerator

Пример:

new HTMLWebpackPlugin({
   inject: true,
   templateParameters: paramGenerator(globals), // <--- Here
   template: '/mytemplate.pug',
}),

import { environment } from '../environment';

export function paramGenerator(globals: () => {[key: string]: any}) {
  return (compilation, assets, assetTags, options) => {
    return {
      compilation: compilation,
      webpackConfig: compilation.options,
      htmlWebpackPlugin: {
        tags: assetTags,
        files: assets,
        options: options
      },
      environment,
      ...globals(),
    };
  }
}

где globals - это функция, которая возвращает простой объект, прикрепленный к вашей глобальной области действия мопса.

Источник

Мопс -HTML-загрузчик options аргумент принимает dataсвойство, в которое вы можете передать свои переменные конфигурации. Посмотреть здесь:

Передайте данные мопсу с помощью pug-html-loader (не удается прочитать свойство undefined)

{
  loader: 'pug-html-loader',
  options: {
    data: {
      title: 'Hello World'
    }
  }
}
Источник

Вы можете заменить TAG из вашего HTML-файла, используя InterpolateHtmlPlugin.

plugins: [

        // Makes some environment variables available in index.html.
        // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
        // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
        // In development, this will be an empty string.
        new InterpolateHtmlPlugin({
            PUBLIC_URL: publicUrl
        }),
...
}

Вы можете установить плагин из пакета activ -dev-utils npm

const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');

Вы можете увидеть полный пример здесь:

HTML-файл: https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/public/index.html

Конфигурация веб-пакета: https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/webpack/webpack.config.dev.js#L9 и https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/webpack/webpack.config.dev.js#L80-L82

package.json: https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/package.json#L55

Источник

Я пытался использовать templateParameters в HtmlWebpackPlugin, похоже, не работает.

Но найдите здесь образец https://github.com/jantimon/html-webpack-plugin/tree/main/examples/template-parameters, и это образец для передачи переменных в файлы шаблонов ejs.

Затем я получил ответ на pug-html-loader, он может передавать данные в файлы pug, просто используйте свойство data в параметрах, как показано ниже, я добавляю в него IMG_PREFIX.

      module.exports = {
  rules: [
    loaders: [{
      include: /\.pug/,
      loader: ['pug-html-loader'],
      options: {
        data: {
          IMG_PREFIX: '/'
        }
      }
    }]
  ]
};

тогда вы можете получить переменную в файле мопса и использовать ее - var imgPrefix = IMG_PREFIX

      div.avatar-block
  img.avatar(src=imgPrefix+'xxx.jpg')
Источник

ваш код должен работать.

Есть ли какая-то конкретная причина, по которой вы используете html-загрузчик?

Параметры шаблона не работают в html-loader, и это может быть причиной возникновения этой проблемы.

Попробуйте удалить html-loader и посмотрите, исправит ли это его.

https://github.com/jantimon/html-webpack-plugin/issues/1400

Источник
Другие вопросы по тегам