未排除node_modules时，babel-loader致Webpack源映射路径异常的解决问询

在Webpack中使用babel-loader时，若未配置exclude: /node_modules/，生成的源映射会错误沿用node_modules内模块自带的源映射相对路径。例如某模块自身源映射的sources为["../src/index.ts"]，Webpack处理后会变成webpack:///../src/index.ts，这种路径在多模块项目中无法定位到实际文件。而添加exclude: /node_modules/后，源映射会显示正确路径webpack:///./node_modules/a/dist/index.js。需要在不排除node_modules的前提下解决该问题。

以下是三种可行的解决思路，可根据需求选择：

1. 禁用babel-loader的源映射生成 #

通过给babel-loader添加sourceMap: false配置，让Babel不保留原模块的源映射，转而由Webpack重新生成带有正确路径的源映射。这种方法配置简单，适合不需要调试node_modules中源码的场景。

修改后的规则配置：

{
  test: /\.m?[jt]sx?$/,
  loader: 'babel-loader',
  options: { sourceMap: false }
}

2. 自定义Webpack源映射路径模板 #

通过配置devtoolModuleFilenameTemplate参数，强制统一所有模块的源映射路径格式，确保node_modules内的模块路径能正确指向其实际位置。

示例配置：

module.exports = function() {
    return {
        // ...其他配置
        devtoolModuleFilenameTemplate: info => {
            const resourcePath = info.resourcePath;
            // 针对node_modules内的模块，强制添加正确的前缀
            if (resourcePath.includes('node_modules')) {
                return `webpack:///./node_modules/${resourcePath.split('node_modules/')[1]}`;
            }
            // 项目内文件保持原有路径格式
            return `webpack:///${resourcePath}`;
        }
    }
}

3. 使用source-map-loader预处理源映射 #

添加source-map-loader作为前置处理器，它会解析node_modules内模块自带的源映射，并修正其中的路径为正确的相对路径。这种方法适合需要保留node_modules中源码映射以进行调试的场景。

首先安装依赖：

npm install source-map-loader --save-dev

然后修改Webpack配置，添加前置规则：

const { resolve } = require('path');

module.exports = function() {
    return {
        module: {
            rules: [
                // 前置处理node_modules内的源映射
                {
                    test: /\.js$/,
                    enforce: 'pre',
                    use: ['source-map-loader'],
                    include: /node_modules/
                },
                {
                    test: /\.m?[jt]sx?$/,
                    loader: 'babel-loader',
                },
            ]
        },
        // ...其他配置
        mode: 'production',
        devtool: 'source-map',
        output: {
            filename: 'ssr-bundle.js',
            path: resolve(__dirname, 'dist'),
            libraryTarget: 'commonjs2',
        },
        externals: {
            preact: 'preact'
        },
        target: 'node',
    }
}

• 无需调试node_modules源码：优先选择方案1，配置简单且编译性能更优；
• 需要调试node_modules源码：选择方案3，保留原始源码映射的同时修正路径；
• 需精细控制源映射路径格式：选择方案2，自定义路径模板满足特定需求。

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