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

Posted 2023-03-13

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

【英文标题】：Webpack source-map targets to *.min.js bundle and not to the source files in production mode

【发布时间】：2021-12-02 00:12:25

【问题描述】：

我们在 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"

【参考方案1】：

您可以尝试以下方法：

在你的 webpack 配置中设置 terser-webpack-plugin。因此请参阅：https://webpack.js.org/configuration/optimization/

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

同时禁用由 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'
                            
                        ,
                   ),
                ],
             ,
        );

【讨论】：

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