带有 sourcemap 的 Webpack 无法解析生产模式下的变量

我想使用 Webpack 为我们的生产构建生成源映射。我设法生成它，但是当我在调试器中的断点处停止时，变量未解析：

我究竟做错了什么？如何生成一个源映射，让 chrome devtools 在我停止在调试器中的断点处时解析变量？

这些是我的 webpack 配置：

webpack.config.js:

const path = require('path');
const ROOT = path.resolve( __dirname, 'src/main/resources/packedbundle' );

const HtmlWebpackPlugin = require('html-webpack-plugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
context: ROOT,

resolve: {
    extensions: ['.ts', '.js']
},

module: {
    rules: [
        {
            test: /\.ts$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'eslint-loader',
                    options: {
                        failOnError: true,
                        quiet: true
                    }
                }
            ],
            enforce: 'pre'
        },

        {
            test: /\.ts$/,
            exclude: [ /node_modules/ ],
            use: [
                'ng-annotate-loader',
                'awesome-typescript-loader'
            ]
        },

        {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'sass-loader'],
                publicPath: '../'
            }),
        },

        {
            test: /\.(jpg|png|gif)$/,
            use: 'file-loader'
        },

        {
            test: /\.(svg|woff|woff2|eot|ttf)$/,
            use: 'file-loader?outputPath=fonts/'
        },

        {
            test: /.html$/,
            exclude: /index.html$/,
            use: 'html-loader'
        }
    ]
},

plugins: [
    new HtmlWebpackPlugin({
        title: 'AngularJS - Webpack',
        template: 'index.html',
        inject: true
    }),
    new LoaderOptionsPlugin({
        debug: true
    }),
    new ExtractTextPlugin('css/style.css')
],

entry: './index.ts'

};

webpack-prd.config.js:

const path = require('path');
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.config.js');
const DESTINATION = path.resolve( __dirname, 'dist/packedbundle' );

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = webpackMerge(commonConfig, {
    devtool: 'module-source-map',
    mode: 'production',
    output: {
        path: DESTINATION,
        filename: 'js/[name]-bundle-[chunkhash].js'
    },

    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                sourceMap: true
            })
        ]
    }
});

package.json:

{
  "name": "com.avon.maps.packedbundle.webcontent",
  "version": "1.0.0",
  "description": "Packed bundle creation screen frontend",
  "main": "index.js",
  "scripts": {
    "prestart": "rimraf dist",
    "start": "node node/node_modules/npm/bin/npx-cli.js check-node-version --package && webpack --config webpack-dev.config.js",
    "prebuild": "rimraf dist",
    "build": "node node/node_modules/npm/bin/npx-cli.js check-node-version --package && webpack --config webpack-prd.config.js",
    "test": "mocha -r ts-node/register -r ignore-styles -r jsdom-global/register __tests__/**/*.spec.ts"
  },
  "author": "BlackBelt",
  "private": true,
  "engines": {
    "node": "11.10.0"
  },
  "devDependencies": {
    "@types/angular": "1.6.51",
    "@types/angular-loading-bar": "0.0.35",
    "@types/chai": "4.1.7",
    "@types/core-js": "2.5.0",
    "@types/jquery": "3.3.29",
    "@types/kendo-ui": "2019.1.1",
    "@types/mocha": "5.2.6",
    "@types/node": "10.12.0",
    "@types/underscore": "1.8.13",
    "@types/webpack-env": "1.13.6",
    "@typescript-eslint/eslint-plugin": "1.6.0",
    "@typescript-eslint/parser": "1.6.0",
    "acorn": "6.1.1",
    "awesome-typescript-loader": "5.2.1",
    "chai": "4.2.0",
    "check-node-version": "3.2.0",
    "css-loader": "1.0.0",
    "eslint": "5.16.0",
    "eslint-config-airbnb-base": "13.1.0",
    "eslint-loader": "2.1.2",
    "eslint-plugin-import": "2.16.0",
    "extract-text-webpack-plugin": "v4.0.0-beta.0",
    "file-loader": "2.0.0",
    "html-loader": "0.5.5",
    "html-webpack-plugin": "3.2.0",
    "ignore-styles": "5.0.1",
    "istanbul-instrumenter-loader": "3.0.1",
    "jsdom": "14.0.0",
    "jsdom-global": "3.0.2",
    "mocha": "6.1.2",
    "ng-annotate-loader": "0.6.1",
    "node-sass": "4.11.0",
    "rimraf": "2.6.2",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.1",
    "ts-node": "8.0.3",
    "typescript": "3.4.2",
    "uglifyjs-webpack-plugin": "2.0.1",
    "webpack": "4.23.1",
    "webpack-cli": "3.1.2",
    "webpack-merge": "4.1.4"
  },
  "dependencies": {
    "angular": "1.7.5",
    "core-js": "3.0.1",
    "growl": "1.10.5",
    "jquery": "3.3.1",
    "underscore": "1.9.1"
  }
}

我无法分享源代码，但我使用了this https://github.com/frederikprijck/angularjs-webpack-starterangularjs webpack 启动项目来启动我的项目。

Webpack 和 terser-webpack-plugin 中无效源映射的问题从以下内容开始解决网页包 4.39.2 https://github.com/webpack/webpack/releases/tag/v4.39.2 and terser-webpack-插件 1.4.0 https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v1.4.0.

v4.39.0 https://github.com/webpack/webpack/releases/tag/v4.39.0发布日志：

webpack-sources + terser-webpack-plugin 附带了 SourceMap 的质量优化

还有一个额外的issue https://github.com/webpack/webpack-sources/pull/67，其修复程序随后发布。它被包括在内webpack-sources v1.4.2/webpack 4.39.2。综上所述4.39.2或者最新版本是可以选择的。

Details

生产模式下的源图似乎按预期工作 https://github.com/webpack/webpack/issues/8302现在大多数情况下。不幸的是，如果您在丑化/缩小/优化过程中进行了不平凡的代码转换，例如函数内联（存在于源代码中，但从 webpack 中溶解），断点有时仍然没有得到很好的映射 https://github.com/webpack/webpack/issues/8302#issuecomment-521779175。部分原因是，源映射规范在这些方面含糊不清。