Final webpack bundle always wraps functions inside eval irrespective of "devtool: 'inline-source-map'"

Question

I was trying out different options for devtool in webpack and irrespective of the options set, it always wraps my components inside eval function.

package.json (I can provide full JSON on request)

"scripts": {
        "dev": "webpack -d --env dev --config ./webpack.dev.js && clientlib --verbose",
        "develop": "webpack -d --env dev --config ./webpack.dev.js",
        "prod": "webpack -p --config ./webpack.prod.js && clientlib --verbose",
        "start": "webpack-dev-server --open --config ./webpack.dev.js"
    },

webpack.common.js

const path = require('path');
const webpack = require('webpack');
const COMMON_SRC_DIR = __dirname + '/common.src';

module.exports = {
    resolve: {
        extensions: ['.js', '.jsx']
    },
    entry: {
        common: COMMON_SRC_DIR + '/index.js',
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/react',
                            '@babel/preset-env'
                        ],
                        plugins: [
                            "@babel/plugin-proposal-class-properties",
                            "@babel/plugin-proposal-object-rest-spread"
                          ]
                    },
                },
            },
        ]
    },
    plugins: [
        new webpack.optimize.LimitChunkCountPlugin({
            maxChunks: 1
        }),
    ],
    stats: {}
};

webpack.dev.js

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

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
});
// I removed/commented out a lot of other options for debugging, but still, the generated bundle is being wrapped in the `eval` function.

What is the expected behavior? Setting different options for devtool should generate different bundles.

Other relevant information: webpack version: "^4.42.1" Node.js version: v14.17.3 Operating System: macOS Bug Sur

A portion of output bundle

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\nvar commonComponents = ['SignIn', 'SearchBar', 'MiniCart', 'DropdownMenu', 'ProfileMegaMenu'];\n/* harmony default export */ __webpack_exports__[\"default\"] = (commonComponents);//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9hcHAuY29uZmlnLmpzLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vLy4vYXBwLmNvbmZpZy5qcz85NDg1Il0sInNvdXJjZXNDb250ZW50IjpbImNvbnN0IGNvbW1vbkNvbXBvbmVudHMgPSBbJ1NpZ25JbicsICdTZWFyY2hCYXInLCAnTWluaUNhcnQnLCAnRHJvcGRvd25NZW51JywgJ1Byb2ZpbGVNZWdhTWVudSddO1xuXG5leHBvcnQgZGVmYXVsdCBjb21tb25Db21wb25lbnRzO1xuIl0sIm1hcHBpbmdzIjoiQUFBQTtBQUFBO0FBRUEiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./app.config.js\n");

Answer 1

I just figured out the option -d --env dev will override your configuration file that's why it possibly uses the default devtool mode.

I think you could just remove it and if you're keen to use env variables, you could use env plugin for webpack:

// Remove this option `-d --env dev`
{
  "develop": "webpack --config ./webpack.dev.js",
}