WebPack 5 如何简化同模式别名配置？避免手动重复设置

方法1：通过数组批量生成别名 #

如果已经明确需要设置别名的目录，直接定义一个目录名数组，循环遍历赋值即可，比手动逐个写高效得多：

const path = require('path');
// 列出需要设置别名的目录，新增目录直接加在这里
const aliasDirs = ['components', 'logic', 'utils', 'assets'];

aliasDirs.forEach(dir => {
  config.resolve.alias[dir] = path.resolve(__dirname, `../src/${dir}`);
});

方法2：自动读取src子目录生成别名 #

要是想完全不用手动维护目录列表，可以借助Node的fs模块自动扫描src下的所有子目录，自动生成对应别名：

const path = require('path');
const fs = require('fs');

const srcDir = path.resolve(__dirname, '../src');
// 筛选出src下的所有子目录
const subDirs = fs.readdirSync(srcDir, { withFileTypes: true })
  .filter(dirent => dirent.isDirectory())
  .map(dirent => dirent.name);

subDirs.forEach(dir => {
  config.resolve.alias[dir] = path.resolve(srcDir, dir);
});

如果有不需要设别名的目录，比如临时文件夹，加个过滤规则就行：

// 定义需要排除的目录
const excludeDirs = ['temp', '.cache'];
const subDirs = fs.readdirSync(srcDir, { withFileTypes: true })
  .filter(dirent => dirent.isDirectory() && !excludeDirs.includes(dirent.name))
  .map(dirent => dirent.name);

补充：TypeScript项目的同步配置 #

如果是TS项目，除了Webpack配置，还得同步tsconfig.json里的paths。要么手动按同样逻辑简化，要么用tsconfig-paths-webpack-plugin插件自动关联，不用重复写配置：

手动简化tsconfig paths #

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "components/*": ["components/*"],
      "logic/*": ["logic/*"]
      // 新增目录时同步添加即可
    }
  }
}

用插件自动关联 #

安装插件后，在Webpack配置里添加：

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  // ...其他Webpack配置
  resolve: {
    plugins: [new TsconfigPathsPlugin()]
  }
};

这样Webpack会自动读取tsconfig的paths作为别名，不用两边重复配置。

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