能否在Webpack执行Loader前修改文件名？附场景需求咨询

核心需求梳理 #

• 根据.env中的TEMPLATE配置项（如TEMPLATE=templateC），打包时仅保留选中的模板文件
• 将选中的模板文件映射为template.js，保证index.js中import * as template from './template.js'的导入路径有效
• 在打包器层面完成文件筛选与路径映射，避免冗余文件进入构建产物

方案1：Webpack 实现方式 #

步骤1：加载环境变量 #

先安装dotenv-webpack，在webpack.config.js中读取.env配置：

const Dotenv = require('dotenv-webpack');
const webpack = require('webpack');
const path = require('path');
// 从环境变量取模板名，默认选templateA
const targetTemplate = process.env.TEMPLATE || 'templateA';

module.exports = {
  plugins: [new Dotenv()],
  // 其他Webpack基础配置...
};

步骤2：模块替换与文件排除 #

用NormalModuleReplacementPlugin把template.js的导入指向选中的模板，再用IgnorePlugin排除未选中的文件：

module.exports = {
  // ...其他配置
  plugins: [
    new Dotenv(),
    // 替换template.js的导入目标
    new webpack.NormalModuleReplacementPlugin(
      /template\.js$/,
      path.resolve(__dirname, `./sampleDir12/${targetTemplate}.js`)
    ),
    // 过滤掉未选中的模板文件
    new webpack.IgnorePlugin({
      checkResource(resource) {
        const allTemplates = ['templateA.js', 'templateB.js', 'templateC.js'];
        const fileName = path.basename(resource);
        return allTemplates.includes(fileName) && fileName !== `${targetTemplate}.js`;
      }
    })
  ]
};

打包后，产物中只会包含选中的模板，且index.js的导入逻辑无需修改。

方案2：Vite 实现方式 #

Vite对环境变量和路径映射的支持更简洁，步骤如下：

步骤1：配置环境变量 #

注意Vite的环境变量需要以VITE_为前缀，所以.env中要写VITE_TEMPLATE=templateC，然后在vite.config.js中读取：

import { defineConfig } from 'vite';
const targetTemplate = process.env.VITE_TEMPLATE || 'templateA';

export default defineConfig({
  // 其他Vite配置...
});

步骤2：别名映射与文件排除 #

通过resolve.alias把./template.js指向选中的模板，再用自定义插件排除冗余文件：

export default defineConfig({
  resolve: {
    alias: {
      './template.js': `/sampleDir12/${targetTemplate}.js`
    }
  },
  plugins: [
    {
      name: 'exclude-unused-templates',
      resolveId(id) {
        const allTemplates = ['templateA.js', 'templateB.js', 'templateC.js'];
        const fileName = id.split('/').pop();
        // 排除未选中的模板文件
        if (allTemplates.includes(fileName) && fileName !== `${targetTemplate}.js`) {
          return false;
        }
      }
    }
  ]
});

更优实现思路 #

1. 目录规范化管理：把所有模板文件放到单独的src/templates/目录，避免和业务代码混放，便于统一维护和筛选。
2. 动态导入+Tree Shaking：如果打包器支持Tree Shaking（Webpack/Vite默认支持），可以直接在index.js中根据环境变量动态导入，打包器会自动剔除未使用的模板：

// index.js 修改导入逻辑
// Vite环境用import.meta.env，Webpack用process.env
const targetTemplate = import.meta.env.VITE_TEMPLATE || 'templateA';
import * as template from `./${targetTemplate}.js`;

这种方式无需复杂插件配置，只要模板文件没有被其他模块引用，就能自动被Tree Shaking移除。

3. 预处理脚本：在打包前用Node.js脚本直接复制选中的模板并重命名为template.js，同时删除其他模板，适合简单项目：

// scripts/setup-template.js
const fs = require('fs');
const path = require('path');
const dotenv = require('dotenv');
dotenv.config();

const templateDir = path.resolve(__dirname, '../sampleDir12');
const targetTemplate = process.env.TEMPLATE || 'templateA';

// 删除旧的template.js
if (fs.existsSync(path.join(templateDir, 'template.js'))) {
  fs.unlinkSync(path.join(templateDir, 'template.js'));
}

// 复制选中模板为template.js
fs.copyFileSync(
  path.join(templateDir, `${targetTemplate}.js`),
  path.join(templateDir, 'template.js')
);

// 删除其他模板
const allTemplates = ['templateA.js', 'templateB.js', 'templateC.js'];
allTemplates.forEach(file => {
  if (file !== `${targetTemplate}.js`) {
    const filePath = path.join(templateDir, file);
    if (fs.existsSync(filePath)) fs.unlinkSync(filePath);
  }
});

然后在package.json的脚本中添加：

{
  "scripts": {
    "prebuild": "node scripts/setup-template.js",
    "build": "vite build" // 或webpack build
  }
}

内容的提问来源于stack exchange，提问作者Peter S.