Webpack的源映射（source-map）针对的是*.min.js捆绑包，而不是生产模式下的源文件。

Question

我们在webpack的开发模式和生产模式下几乎具有相同的配置。两种情况下，我们都希望有源映射以便在浏览器中进行调试。对于开发模式而言，一切正常。我们的源文件出现在浏览器dev工具中，并且所有的文件都列在app2.min.js.map文件中。

{
    "version":3,
    "sources":[
        "webpack:///webpack/bootstrap",
        "webpack:///./app2/app.dev.ts",
        "webpack:///./app2/app.module.ts",
        "webpack:///./app2/app.routing.ts",
        "webpack:///./app2/components/absenceManagement/...
        ...

但是在生产模式下，源映射将指向被压缩的捆绑文件

{
    "version":3,
    "sources":[
        "webpack:///js/app2.min.js"
    ],
    "names":[
        "modules","installedModules",
        "__webpack_require__",
        ...

因此，捆绑的 js 文件指向源映射（//# sourceMappingURL=app2.min.js.map），而源映射指回捆绑文件。

我们的配置 webpack.dev.js

const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

module.exports = function () {
    return webpackMerge(commonConfig,
        {
            devtool: 'source-map',

            entry: {
                app: './app2/app.dev.ts'
            },
            mode: 'development'
        });
}

webpack.prod.js

const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

module.exports = function () {
    return webpackMerge(commonConfig,
        {
            devtool: 'source-map',

            entry: {
                app: './app2/app.prod.ts'
            },
            mode: 'production'
        });
}

webpack.common.js

const { CheckerPlugin } = require('awesome-typescript-loader');

module.exports = {

    // Currently we need to add '.ts' to the resolve.extensions array.
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.html', '.css'],
        modules: ['app2', 'node_modules', 'js']
    },

    // Add the loader for .ts files.
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /\.spec\.ts$/,
                use: ['awesome-typescript-loader', 'angular2-template-loader']
            },
            {
                test: /\.css$/,
                loader: 'raw-loader'
            },
            {
                test: /\.html$/,
                loader: 'raw-loader'
            }
        ]
    },
    plugins: [
        new CheckerPlugin()
    ],
    stats: {
        colors: false
    },
    output: {
        filename: './js/app2.min.js'
    }
};

tsconfig.js

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "./@types/",
      "./node_modules/@types/",
      "./js/"
    ],
    "baseUrl": ".",
    "paths": {
      "typemoq": [ "js/typemoq" ]
    },
    "types": [
      "lodash",
      "moment",
      "jquery",
      "typemoq"
    ]
  },
  "awesomeTypescriptLoaderOptions": {
        "useCache": true
    },
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

部分 package.json 内容

    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^5.2.1",
    ...
    "typescript": "^2.9.2",
    "webpack": "^4.19.1",
    "webpack-merge": "^4.1.4",
    "webpack-stream": "^5.1.1"

- das.flaigsi

Answer 1

你可以尝试以下操作：

1. 在webpack配置中安装terser-webpack-plugin。请参阅：https://webpack.js.org/configuration/optimization/

2. 然后使用UglifyJS来压缩您的代码。请参阅：https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions和https://github.com/mishoo/UglifyJS#minify-options。

3. 还要禁用webpack本身进行的优化，可以使用以下命令：

    module.exports = {
      //...
       optimization: {
       minimize: false,
      },
    };`

您的生产环境配置应该如下所示：

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({
                        parallel: true,
                        minify: TerserPlugin.uglifyJsMinify,
                        terserOptions: {
                            sourceMap: {
                                filename: 'app2.min.js',
                                url: 'app2.min.js.map'
                            }
                        },
                   }),
                ],
             },
        });
}

- Fabian

---

不幸的是，这并没有改变什么。我在源映射中得到了相同的结果。 - das.flaigsi