Webpack无法加载本地库Sourcemap的问题求助

问题背景 #

我用esbuild打包了一个工具函数库，打包配置如下：

// esbuild.js
esbuild.build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  sourcemap: true,
  minify: true,
  out: 'dist',
  format: 'cjs',
  target: ['es6']
})

打包后dist目录结构：

/dist
    /user
        profile.d.ts
        settings.d.ts
        history.d.ts
    /invoice
        latest.d.ts
        quarter.d.ts
    index.d.ts
    index.js
    index.js.map

在消费该库的Webpack应用中，能正常调用库函数，但浏览器调试时库代码处于压缩状态，难以阅读。当前Webpack配置：

// webpack.config.js
module.exports = (env, argv) => {
  return {
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.[jt]sx?$/,
                loader: 'esbuild-loader',
                options: {
                    loader: 'tsx',
                    target: 'es2015',
                    sourcemap: true
                },
                exclude: /node_modules/
            }               
        ]
    },
    resolve: {
         extensions: ['.tsx', '.ts', '.js', '.jsx']
    },
    target: ['web', 'es5'],
    optimization: {
        minimizer: [
            new ESBuildMinifyPlugin({
                target: 'es2015'
            })
        ]
    }
  }
}

解决方案 #

1. 让Webpack处理你的库文件（取消exclude限制） #

Webpack默认会跳过node_modules下的文件处理，导致库的sourcemap被忽略。修改esbuild-loader规则，将你的库从排除列表中移除：

{
    test: /\.[jt]sx?$/,
    loader: 'esbuild-loader',
    options: {
        loader: 'tsx',
        target: 'es2015',
        sourcemap: true
    },
    // 替换成你的库实际名称，让Webpack处理该库文件
    exclude: /node_modules(?!\/your-library-name)/
}

2. 添加source-map-loader整合库的Sourcemap #

使用source-map-loader直接加载库已生成的sourcemap，将其与应用的sourcemap整合。先安装依赖：

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

然后在Webpack配置的module.rules中新增预处理规则：

module: {
    rules: [
        // 新增：加载库的sourcemap文件
        {
            test: /\.js$/,
            enforce: 'pre',
            use: ['source-map-loader'],
            // 仅处理你的库
            include: /node_modules\/your-library-name/
        },
        // 原有的esbuild-loader规则（已修改exclude）
        {
            test: /\.[jt]sx?$/,
            loader: 'esbuild-loader',
            options: {
                loader: 'tsx',
                target: 'es2015',
                sourcemap: true
            },
            exclude: /node_modules(?!\/your-library-name)/
        }               
    ]
}

3. 优化开发环境的devtool配置 #

开发环境下选择更适合调试的devtool类型，比如eval-source-map，兼顾构建速度和源码可读性：

devtool: argv.mode === 'development' ? 'eval-source-map' : 'source-map',

可选：优化esbuild打包库的Sourcemap设置 #

如果希望sourcemap关联更准确，可调整esbuild的sourcemap配置：

esbuild.build({
  // 其他配置不变
  sourcemap: 'external', // 生成外部sourcemap（默认值），确保map文件与js文件同目录
  // 若希望源码嵌入到map中，可使用sourcemap: 'inline'，但会增加文件体积
})

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