如何自定义Webpack替换符[camelCaseName]实现蛇形文件名转驼峰？

刚好我之前研究过这类需求，Webpack本身并没有直接暴露自定义内置替换符的官方API，但我们可以通过两种实用的方式来实现你想要的[camelCaseName]效果，把蛇形命名的文件名转成驼峰格式，下面给你详细拆解：

方法一：利用output.filename的函数形式（快速实现） #

这是最直接的实现方式，Webpack的output.filename支持传入一个函数，我们可以在函数里手动处理文件名的格式转换。

首先写一个蛇形转驼峰的工具函数，然后在filename函数里拿到原始chunk名，转换后返回即可：

const path = require('path');

// 蛇形转驼峰的工具函数：处理下划线分隔的命名，比如"user_info" → "userInfo"
const snakeToCamel = (str) => {
  return str.replace(/_([a-z])/g, (match, letter) => letter.toUpperCase());
};

module.exports = {
  // ...其他Webpack配置（entry、module等）
  output: {
    filename: (pathData) => {
      // 获取原始的chunk名称（如果没有name则用id兜底）
      const originalName = pathData.chunk.name || pathData.chunk.id;
      // 转换为驼峰命名
      const camelCaseName = snakeToCamel(originalName);
      // 返回最终的文件名格式，这里可以根据需求调整（比如加hash等）
      return `${camelCaseName}.js`;
    },
    path: path.resolve(__dirname, 'dist'),
  },
};

这种方式不需要写额外插件，适合快速实现单一场景的需求。

方法二：编写自定义Webpack插件（全局复用） #

如果需要在多个配置项里复用这个驼峰转换逻辑，或者想完全模拟Webpack内置替换符的使用方式（直接写[camelCaseName]），可以写一个自定义插件来实现。

这个插件的核心思路是通过Webpack的Tapable钩子，拦截文件名模板的解析过程，把[camelCaseName]替换成转换后的驼峰名称：

const path = require('path');

class CamelCaseNamePlugin {
  apply(compiler) {
    // 通用的蛇形转驼峰函数，可按需扩展（比如支持连字符"-"的转换）
    const snakeToCamel = (str) => {
      return str.replace(/_([a-z])/g, (match, letter) => letter.toUpperCase());
      // 如果需要同时处理连字符，改成下面的正则：
      // return str.replace(/[-_]([a-z])/g, (match, letter) => letter.toUpperCase());
    };

    // 监听compilation钩子，介入文件名解析流程
    compiler.hooks.compilation.tap('CamelCaseNamePlugin', (compilation) => {
      // 拦截assetPath的模板解析，替换自定义占位符
      compilation.mainTemplate.hooks.assetPath.tap('CamelCaseNamePlugin', (assetPath, data) => {
        if (data.chunk) {
          // 将模板中的[camelCaseName]替换为驼峰后的名称
          return assetPath.replace(/\[camelCaseName\]/g, snakeToCamel(data.chunk.name || data.chunk.id));
        }
        return assetPath;
      });
    });
  }
}

module.exports = {
  // ...其他Webpack配置
  output: {
    // 现在可以直接像内置替换符一样使用[camelCaseName]了
    filename: '[camelCaseName].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new CamelCaseNamePlugin(), // 注册自定义插件
  ],
};

这样配置后，你就能在output.filename、output.chunkFilename等地方直接使用[camelCaseName]替换符，和Webpack自带的[name]、[hash]用法完全一致。

一些注意点 #

• 如果chunk没有设置name，Webpack会用id代替，所以转换函数里要做兜底处理
• 蛇形转驼峰的正则可以根据你的实际命名规则调整（比如支持大写开头的驼峰、处理连字符等）
• 动态导入的chunk也会被自动处理，不需要额外配置

内容的提问来源于stack exchange，提问作者Tanin