Webpack生产模式下source-map仅指向min.js包不关联原始源码如何解决

Webpack 4 的 production 模式默认会启用内置的 TerserPlugin 执行代码压缩，你没有显式配置该插件的 sourceMap 选项，导致压缩环节丢弃了TypeScript编译阶段生成的源码映射关系，最终生成的source-map只能指向压缩后的bundle文件，无法关联原始源码。

1. 修改webpack.prod.js配置，显式开启Terser的source-map支持 #

你不需要额外安装依赖，Webpack 4已内置terser-webpack-plugin，直接引入并配置即可：

const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
// 引入内置的压缩插件
const TerserPlugin = require('terser-webpack-plugin');

module.exports = function () {
    return webpackMerge(commonConfig,
        {
            devtool: 'source-map',
            entry: {
                app: './app2/app.prod.ts'
            },
            mode: 'production',
            // 新增优化配置
            optimization: {
                minimizer: [
                    new TerserPlugin({
                        // 开启压缩阶段的source-map生成
                        sourceMap: true,
                        // 可选：保留类/函数名，方便调试
                        terserOptions: {
                            keep_classnames: true,
                            keep_fnames: true
                        }
                    })
                ]
            }
        });
}

2. 清理缓存后重新打包 #

awesome-typescript-loader默认启用了缓存，执行打包前先删除缓存目录避免旧缓存影响：

rm -rf node_modules/.cache
npm run build

打包完成后打开app2.min.js.map，检查sources字段是否已经包含原始.ts文件路径，此时浏览器开发者工具中即可正常展示原始源码进行调试。

内容的提问来源于stack exchange，提问作者das.flaigsi