使用Webpack为RTL和LTR支持生成两个不同的索引文件
我试图在我的反应应用程序中有两个不同的样式文件，以支持RTL和LTR方向。因此，我使用RTLCSS及其Webpack插件生成两个不同的文件：(myfile.chunk.css和myfile.chunk.rtl.css)。
但是，在由index.html生成的HtmlWebpackPlugin文件中，其中一个被注入。如何拥有两个索引文件，如index.html和index.rtl.html？第二个文件应该包含RTL样式的文件，包括RTL块。
回答 1
Stack Overflow用户
发布于 2019-06-16 14:27:18
要完成您想要的内容，请先阅读插件文档：
现在，要控制生成的HTML，您需要知道添加到HtmlWebpackPlugin配置中的任何附加键都可以通过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
<!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>尽管如此，我们可以切换到手动资产注入，以便更好地控制页面中包含哪些CSS文件，例如myproject.rtl.css而不是myproject.css。
webpack.config.js
plugins: [
new HtmlWebpackPlugin({
.
.
.
// disable automatic injection of assets
inject: false,
})
]index.template.html
<!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>应用上述内容将使您能够生成index.ltr.html和index.rtl.html，而无需编写硬代码包引用。
https://stackoverflow.com/questions/56580681
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号