如何通过Webpack Node API跨目录运行并加载当前目录的Loader？

问题描述 #

我需要在仅包含TypeScript源码的任意指定目录运行Webpack，但该目录没有Webpack配置中用到的Loader。当前配置如下：

webpack({
    context: "/some/arbitrary/directory",
    ..., // 其他配置项
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    // 剩余loader配置
                }
            }
        ]
    }
})

但Webpack会在context指定的目录（/some/arbitrary/directory）中查找babel-loader，请问如何指定Loader从其他目录加载？或者这根本无法实现？目前我只能考虑通过linkfs或其他非常规手段操作inputFileSystem配置项。

可行解决方案 #

1. 直接使用Loader的绝对路径 #

在配置里将loader字段替换为目标Loader的绝对路径，Webpack会直接去该路径查找，不再依赖context目录：

use: {
    loader: "/absolute/path/to/your/node_modules/babel-loader",
    // 其他loader配置
}

2. 配置resolveLoader.modules #

在Webpack配置中添加resolveLoader字段，指定Loader的优先查找目录，Webpack会按顺序在这些目录中搜索Loader：

webpack({
    context: "/some/arbitrary/directory",
    resolveLoader: {
        // 先去指定的外部node_modules找，再找默认位置
        modules: ["/path/to/external/node_modules", "node_modules"]
    },
    // 其他配置项
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    // 剩余loader配置
                }
            }
        ]
    }
})

3. 使用npm link共享Loader（本地开发场景） #

如果是本地开发环境，可以通过npm软链共享Loader：

• 在装有babel-loader的项目目录执行：npm link babel-loader
• 切换到context指定的目标目录，执行：npm link babel-loader
  这样目标目录会创建指向全局babel-loader的软链，Webpack即可找到Loader。

这些方法都能规避Webpack从context目录查找Loader的限制，无需依赖linkfs这类非常规手段。

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