Webpack source-map targets to *.min.js bundle and not to the source files in production mode

Question

we have almost the same configuration for development and production mode in webpack. In both cases we want to have source maps to be able to debug in browser. For development mode all works fine. Our source files appear in the browser dev tools and all our files are listed in the app2.min.js.map file.

{
    "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/...
        ...

But in production mode the source map targets back to the minified bundle file

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

Therefore the bundled js file targets to the source map (//# sourceMappingURL=app2.min.js.map) and the source map back to the bundle file.

Our configuration 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"
  ]
}

some of the 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"

Fabian · Accepted Answer · 2021-10-13 15:42:37Z

1

You can try the following:

Setup terser-webpack-plugin in your webpack config. Therefore see: https://webpack.js.org/configuration/optimization/
And then use UglifyJS for the minification of your code. See: https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions and https://github.com/mishoo/UglifyJS#minify-options.
Also disable the optimiztion that is done by webpack itself which you can do with:

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

Your configuration for your productive environment should look like this:

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

answered Oct 13, 2021 at 15:42

Fabian

5126 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

das.flaigsi Over a year ago

Unfortunately this does change nothing. I get the same result in the source-map.

Collectives™ on Stack Overflow

Webpack source-map targets to *.min.js bundle and not to the source files in production mode

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related