在Rails 6中使用Webpack导入条件图像

Question

我正在使用Rails 6/Webpack开发一个应用程序，它使用不同的子域，对于每个子域，我们关联不同的用户、样式表等。我想根据域有条件地导入我的项目图像。目前，我的app/javascript/pack/application.js在导入常用图像

时这样做。

require.context('../images',true)

但是，如果我为图片创建一个单独的文件夹(比如images_subdomainfoo)然后尝试一些有条件的导入，比如

const foo = import("images_subdomainfoo/bar.png")

这个映像被编译，即使包含语句的文件没有被导入(例如，我将这行放在subdomainfoo.js文件中，然后将这行添加到我的HTML头文件

中

<%= javascript_pack_tag 'subdomainfoo', 'data-turbolinks-track': 'reload' if request.subdomain == "foo" %>

，但无论子域是什么，图像都会被加载)。

我已经看到了一些方法，如NormalModuleReplacementPlugin，但我不确定如何将其纳入Rails 6应用程序，因为它涉及启动webpacker与特殊选项，如npx webpack --env APP_TARGET=VERSION_A

如有任何建议，不胜感激。

Answer 1

您可以将以下行添加到_head.html.erb(javascript_pack_tag之上):

<script>
window.subdomain = '<%= request.subdomain %>'
</script>

这将确保你的子域名被附加到全局对象，可以在Javascript中访问。

然后您可以添加以下行到您的app/javascript/pack/application.js-假设您的图像被放置在以子域名命名的文件夹中。

const foo = import(`images_${window.subdomain}/bar.png`)