Блог

Я считаю, что я искал везде, но я пришел с пустыми руками. Я использовал html-webpack-plugin для загрузки одного index.html файла из своего исходного кода, но мой клиент пришел с некоторыми локализациями, и я подумал, что было бы здорово, если бы я мог добавлять их динамически.

Итак, я пытаюсь переключиться на использование движка шаблонов с html-webpack-plugin , а именно ejs , но у меня серьезные проблемы!

Я хочу html-webpack-plugin визуализировать и .ejs файл, и мне нужно предоставить указанному .ejs файлу огромный объект локализации.

Я хочу что-то вроде этого:

 <h1><%= header.title %></h1>
  

Исходящий из .json файла локализации, подобного этому:

 {
  "header": {
    "title": "My Clients Super Awesome Website"
  }
}
  

Я пытался использовать два разных загрузчика ejs webpack, и я просто не могу понять, как передать простой объект в загрузчик ejs, который я могу использовать в своем файле ejs.

Надеюсь, у вас, ребята, есть несколько ответов: D Заранее спасибо.

в index.ejs

 <%= htmlWebpackPlugin.options.header.title %>
  

в webpack.config.js

 module: {
    rules: [
    {
        test: /.ejs$/,
        loader: 'ejs-loader'
    }
]}
  

и

 plugins: [
new HtmlWebpackPlugin({
    header: {title: 'test'},
    template: './index.ejs',
})]
  

УВЕДОМЛЕНИЕ. не используйте options: { variable: 'data or xxx' } after ejs-loader , если переменная указана, htmlWebpackPlugin будет неизвестна.

Итак, вам нужно использовать html-webpack-plugin в вашей конфигурации webpack. И поместите объект в параметр HtmlWebpackPlugin.

Я искал то же самое. Похоже, что шаблон может получить доступ к объекту options, переданному в html-webpack-plugin как htmlWebpackPlugin.options объект.

Чтобы включить, например. заголовок, вам нужно ссылаться на него из шаблона как htmlWebpackPlugin.options.title . Я не знаю, есть ли какой-либо способ передавать значения более независимым от плагинов способом, поэтому вы можете просто ссылаться title на as title в файле шаблона.

легко вставлять любые параметры.

 // webpack.config.js

    ...
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'template/index.ejs',
      templateParameters: {
        'title': 'My Clients Super Awesome Website',
        'episode: '2'
      }
    }),
    ...
  

 <!-- index.ejs -->

<%= title %>
<%= episode %>