Webpack source-map 指向 *.min.js 包，而不是生产模式下的源文件

Question

我们在 webpack 中开发和生产模式的配置几乎相同。在这两种情况下，我们都希望源映射能够在浏览器中进行调试。对于开发模式，一切正常。我们的源文件出现在浏览器开发工具中，我们所有的文件都列在 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"

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'
                            }
                        },
                   }),
                ],
             },
        });
}