Как передать переменную из jade-loader в файл шаблона Jade?

Question

Я хочу передать свой объект данных в нефритовые файлы, но это невозможно. jade-loader:

{
   test: /\.jade$/,
   loader: "jade",
   query: {
      pretty: true,
      locals: {
          name: "Georg"
    }
}

}

plugins:

plugins: [
    new HtmlWebpackPlugin({
       filename: "index.html",
       template: "./src/jade/index.jade"
})]

index.jade:

span=locals.name

Я запускаю веб-пакет и получаю это index.html:

<span></span>

Моя переменная name не проходи Зачем? Как это исправить?

Answer 1

Вы должны использовать pug-html-loader

затем в webpack.config.js

  ...
  {
    test:/\.pug$/,
    exclude: ['/node_modules/'],
    loader: 'pug-html-loader',
    query: {
      data: {name:'test'},
      pretty: true
    }
  },
  ...

затем в ваших файлах pug(jade) используйте эти данные

 h3.title= data.name

Answer 2

Вы можете передать пользовательские свойства HtmlWebpackPlugin опций и используйте их в ваших шаблонах pug (см. htmlWebpackPlugin.options в документации). Работает с последними версиями HtmlWebpackPlugin, pug-loader и webpack 2. Не могу подтвердить, что он работает с предыдущими версиями, но я верю, что это так.

pug правило:

{
  test: /\.pug$/,
  loader: 'pug-loader',
  options: {
    // Use `self` namespace to hold the locals
    // Not really necessary
    self: true,
  },
}

HtmlWebpackPlugin опции:

{
  filename: 'index.html',
  template: 'src/html/index.pug',

  // Your custom variables:
  name: 'Georg',
}

Используя его в index.pug шаблон:

span= self.htmlWebpackPlugin.options.name

Обратите внимание, что вы можете установить self возможность false и опустите его в ваших шаблонах мопса, используя переменные напрямую. Для получения дополнительной информации см. Справочник мопса.