Создайте два разных индексных файла для поддержки RTL и LTR с помощью Webpack - PullRequest
Новая
       35

Создайте два разных индексных файла для поддержки RTL и LTR с помощью Webpack

1 голос
/ 13 июня 2019

Я пытаюсь использовать два разных файла стилей в своем приложении для поддержки как RTL, так и LTR-направлений.Поэтому я использую RTLCSS и его плагин Webpack для создания двух разных файлов: (myfile.chunk.css и myfile.chunk.rtl.css).

Однако в файле index.html, созданном HtmlWebpackPlugin, один из них внедряется.Как я могу иметь два индексных файла, таких как index.html и index.rtl.html?Второй файл должен содержать файлы стиля RTL, включая фрагменты RTL.

1 Ответ

1 голос
/ 16 июня 2019

Чтобы выполнить то, что вы ищете, сначала прочтите документацию к плагину:

  1. Создание нескольких файлов HTML .
  2. Написание собственных шаблонов .

Теперь, чтобы иметь контроль над сгенерированным HTML, вы должны знать, что любой дополнительный ключ, который вы добавляете в HtmlWebpackPlugin config будет доступен через htmlWebpackPlugin.options.

Например, добавление ключа dir в конфигурацию:

webpack.config.js 

plugins: [
  new HtmlWebpackPlugin({
    title: 'Custom template',
    // Load a custom template (lodash by default)
    template: 'index.template.html',
    // Extra Key
    dir:'rtl'
  })
]

будет доступно в нашем шаблонечерез htmlWebpackPlugin.options.dir:

index.template.html 

<code><!DOCTYPE html>
<html dir="<%=htmlWebpackPlugin.options.dir%>">
  <head>
    <meta charset="utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- print a list of all available keys -->
    <pre>
      <%=JSON.stringify(htmlWebpackPlugin)%>

При этом мы можем переключитьсяк ручному вводу ресурсов, чтобы иметь больше контроля над тем, какие CSS-файлы включать на странице, например myproject.rtl.css вместо myproject.css

webpack.config.js 

plugins: [
  new HtmlWebpackPlugin({
    .
    .
    .
    // disable automatic injection of assets
    inject: false,
  })
]

index.template.html 

<code><!DOCTYPE html>
<html dir="<%=htmlWebpackPlugin.options.dir%>">
  <head>
    <meta charset="utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- manually inject css -->
    <%=
       Object.keys(htmlWebpackPlugin.files.chunks).map(
         key => htmlWebpackPlugin.files.chunks[key].css.map(
           css=>`<link href="${htmlWebpackPlugin.options.dir == 'rtl' ?css.replace('.css','.rtl.css'):css}" rel="stylesheet">`)
           .join(''))
         .join('')
    %>
  </head>
  <body>
    <!-- print a list of all available keys -->
    <pre>
      <%=JSON.stringify(htmlWebpackPlugin)%>
<% = Object.keys (htmlWebpackPlugin.files.chunks) .map (key => `
...