Can module import path issues be solved during Webpack compilation?
<p>I want to create a build that only includes specific components in the bundle based on environment variables. </p>
<p>For example, when I import the component like this: </p>
<pre class="brush:php;toolbar:false;">import Module1 from '@/components/Module1'</pre>
<p>I want the path to actually be transformed so that the import looks like this: </p>
<pre class="brush:php;toolbar:false;">import Module1 from '@/components/brands/' process.env.APP_BRAND 'Module1'</pre>
<p>Now, I don't want to do this for all imports, but only for specific imports (e.g. modules with branded versions), so maybe I want to prepend the import path with something like < code>!brand!</code>, which will be the indicator to apply the path transformation.
Therefore, the above logic should only be executed for the following import paths: </p>
<pre class="brush:php;toolbar:false;">import Module1 from '!brand!@/components/Module1'</pre>
<p>If <code>process.env.APP_BRAND</code> is false, then I just want to keep the original import (e.g. just remove the <code>!brand!</code> prefix from the path ). </p>
<p>So the important point is that I want this to be done at build time so that Webpack can statically analyze the module and create an optimized build. Is this feasible? I think I need to add this path conversion logic somehow, but how should I do it? Should I create a loader, plugin or is there a ready-made solution? </p>
<p>I'm using Webpack 5. </p>