首页  >  问答  >  正文

能否在Webpack编译过程中解决模块导入路径问题?

<p>我想创建一个构建,根据环境变量,在捆绑包中只包含特定的组件。</p> <p>例如,当我像这样导入组件:</p> <pre class="brush:php;toolbar:false;">import Module1 from '@/components/Module1'</pre> <p>我希望路径实际上被转换,使得导入看起来像这样:</p> <pre class="brush:php;toolbar:false;">import Module1 from '@/components/brands/' + process.env.APP_BRAND + 'Module1'</pre> <p>现在,我不想对所有的导入都这样做,只想对特定的导入(例如,具有品牌版本的模块)进行这样的操作,所以也许我想在导入路径前加上类似于<code>!brand!</code>的前缀,这将是应用路径转换的指示符。 因此,上述逻辑应仅对以下导入路径执行:</p> <pre class="brush:php;toolbar:false;">import Module1 from '!brand!@/components/Module1'</pre> <p>如果<code>process.env.APP_BRAND</code>为假值,那么我只想保持原始导入(例如,只从路径中删除<code>!brand!</code>前缀)。</p> <p>所以重要的一点是,我希望这在构建时完成,这样Webpack可以静态分析模块并创建优化的构建。这个可行吗?我想我需要以某种方式添加这个路径转换逻辑,但是我应该如何做呢?我应该创建一个loader,插件还是有现成的解决方案吗?</p> <p>我正在使用Webpack 5。</p>
P粉231079976P粉231079976443 天前508

全部回复(1)我来回复

  • P粉714844743

    P粉7148447432023-08-27 13:17:58

    Webpack提供了一个模块resolve功能,你可以在这里使用。阅读这里的文档。例如,在你的情况下,你可以这样做:

    const path = require('path');
    
    module.exports = {
      resolve: {
        alias: {
          '@/components/Module1': path.join(
            __dirname,
            process.env.APP_BRAND
              ? '@/components/brands/' + process.env.APP_BRAND + 'Module1'
              : '@/components/Module1')
        }
      },
    };

    请注意,在这里你需要将环境变量传递给你的Webpack进程(也就是Node.js进程),并根据此进行决策。另外,你的resolve模块必须是绝对路径

    回复
    0
  • 取消回复