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

Question

我想用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"
  }
}

我无法共享源代码，但我使用这个 angularjs webpack启动项目开始我的。

Answer 1

现在，从webpack 4.39.2和terser-webpack-plugin 1.4.0开始， 解决了Webpack和terser-webpack-plugin中无效源图的问题。

v4.39.0发布日志：

webpack-sources + terser-webpack-plugin为SourceMaps提供高质量的优化

还有一个问题 ，其修复程序稍后发布。 它包含在webpack-sources v1.4.2 webpack 4.39.2 / webpack 4.39.2 。 总结4.39.2或最新版本是一个去。

生产模式中的源映射现在似乎在大多数情况下都按预期工作 。 不幸的是，如果您在丑化/缩小/优化过程中进行了非常简单的代码转换，例如函数内联（存在于源代码中，但是从webpack中解散），则断点有时仍然无法很好地映射 。 部分原因是，源图规范在这些方面非常模糊。

这是一个示例存储库 ，您可以在其中遇到内联的断点问题。