Reactjs 使用Webpack为RTL和LTR支持生成两个不同的索引文件_Reactjs_Webpack_Create React App_Html Webpack Plugin_Rtlcss

Reactjs 使用Webpack为RTL和LTR支持生成两个不同的索引文件

reactjs webpack

Reactjs 使用Webpack为RTL和LTR支持生成两个不同的索引文件,reactjs,webpack,create-react-app,html-webpack-plugin,rtlcss,Reactjs,Webpack,Create React App,Html Webpack Plugin,Rtlcss,我试图在我的react应用程序中有两个不同样式的文件来支持RTL和LTR方向。因此，我使用RTLCSS及其Webpack插件生成两个不同的文件：（myfile.chunk.css和myfile.chunk.rtl.css）但是，在HtmlWebpackPlugin生成的index.html文件中，注入了其中一个。如何拥有index.html和index.rtl.html这样的两个索引文件？第二个文件应该包含RTL样式的文件，包括RTL块。要完成您要查找的内容，请首先阅读插件文档：现在，

我试图在我的react应用程序中有两个不同样式的文件来支持RTL和LTR方向。因此，我使用RTLCSS及其Webpack插件生成两个不同的文件：（myfile.chunk.css和myfile.chunk.rtl.css）

但是，在HtmlWebpackPlugin生成的index.html文件中，注入了其中一个。如何拥有index.html和index.rtl.html这样的两个索引文件？

第二个文件应该包含RTL样式的文件，包括RTL块。

要完成您要查找的内容，请首先阅读插件文档：

现在，要控制生成的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'
  })
]

<!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)%>
    </pre>
    <!-- manually inject js -->
    <%=
      Object.keys(htmlWebpackPlugin.files.chunks).map(
        key=>`<script type="text/javascript" src="${htmlWebpackPlugin.files.chunks[key].entry}" defer></script>`)
        .join('')
    %>
  </body>
</html>

可通过

htmlWebpackPlugin.options.dir在我们的模板中访问：
index.template.html
<!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)%>
    </pre>
  </body>
</html>

index.template.html
<!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)%>
    </pre>
  </body>
</html>


htmlWebpackPlugin.files.chunks[key].css.map(
css=>``）
.加入（“”）
.加入（“”）
%>
``)
.加入（“”）
%>

应用以上内容将使您能够生成index.ltr.html
和index.rtl.html
，而无需硬编码包引用