Webpack 中自定义 Loader 不替代 ts-loader，而是编译前/后做轻量干预，如注入头注释、提取 i18n 注释、转换装饰器、条件删代码，需兼容 TS 编译链且不破坏类型检查。
Webpack 处理 TypeScript 文件时，自定义 Loader 不是用来替代 ts-loader 或 babel-loader 的编译主流程，而是用于在编译前、后做针对性干预——比如注入元信息、重写特定 AST 节点、添加运行时逻辑、或预处理 .ts 文件内容。关键在于：它必须和 TypeScript 编译链兼容，不能破坏类型检查或输出结构。
明确 Loader 的插入时机和角色
TS 文件的典型处理链是：源码 → 自定义 loader（可选）→ ts-loader/babel-loader → Webpack 打包。自定义 Loader 只负责字符串或 AST 层面的轻量转换，不参与类型校验，也不生成 .d.ts。它适合以下场景：
- 在所有 .ts 文件顶部自动插入版权注释或环境标识
- 将特定注释（如
// @i18n key="xxx"）提取并生成 JSON 映射表 - 把某个装饰器语法（如
@log）提前转为标准函数调用（需配合 AST） - 根据构建环境变量，条件性删除/替换某段代码块（类似 C 的 #ifdef）
同步 Loader 示例：给 TS 文件加统一头部
创建 ./loaders/add-header-loader.js：
module.exports = function(source) {
const options = loaderUtils.getOptions(this) || {};
const header = `// Build: ${options.env || 'dev'}\n// Generated on ${new Date().toISOString()}\n`;
return header + source;
};
在 webpack.config.js 中配置：
rules: [{
test: /\.ts$/,
use: [
{ loader: path.resolve('./loaders/add-header-loader'), options: { env: 'prod' } },
'ts-loader'
]
}]
替成
"HELLO"），推荐用 typescript 包解析 AST，避免正则误伤：
const ts = require('typescript');module.exports = function(source) {
const callback = this.async();
const sourceFile = ts.createSourceFile('file.ts', source, ts.ScriptTarget.Latest, true);
const visitor = (node) => {
if (ts.isStringLiteral(node) && node.text) {
return ts.factory.createStringLiteral(node.text.toUpperCase());
}
return ts.visitEachChild(node, visitor, ts.getCompilerOptions());
};
const transformed = ts.transform(sourceFile, [() => visitor]);
const result = ts.createPrinter().printFile(transformed.transformed[0]);
callback(null, result);
};
这种写法能精准定位语法节点，不会影响注释、模板字符串内部或变量名，比字符串替换更可靠。
和 ts-loader 协同的关键细节
-
不要覆盖 ts-loader 的输出格式：确保你的 Loader 返回仍是合法 TS/JS 字符串，且不破坏 sourcemap（如需保留，用
this.callback(null, content, map)） - 避开类型检查阶段：ts-loader 默认会报错非法语法，所以自定义 Loader 修改后的代码仍需符合 TypeScript 语法规则
- 慎用副作用操作：例如读取外部文件、写磁盘、发起网络请求——这会破坏 Webpack 的缓存机制和构建确定性
-
开发时启用 cacheDirectory：在 ts-loader 配置中设
cacheDirectory: true，可跳过未变更文件的重复编译，提升自定义 Loader 的调试效率
