Remove Webpack's IIFE module wrapping to produce a row JS script bundle file

Question

I use Webpack 5 in my .net application to bundle my JavaScript and LESS files. I have multiple JavaScript files and need to bundle them into one file. After bundling into one file each separate javascript is wrapped with IIFE module. Now I'm already using IIFE in my JavaScript. So need to remove those IIFE wrapping. I have already tried "iife: false," in output. But it's only working for a single javascript file when I have multiple js files it's not working. Is there a way I can achieve this goal?

webpack.config.js

 <pre> var path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");


module.exports = {
    // First, let's define an entry point for webpack to start its crawling.
    entry: {
        main: './index.js',
    },
    // Second, we define where the files webpack produce, are placed
    output: {
        path: path.resolve(__dirname, './wwwroot/js/webpack'),
        filename: 'main.bundle.js',
        library: ['WebPack'],
        iife: false,
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ],
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader'],
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/', // Output directory for images
                        },
                    },
                ]
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'styles.css', // Specify the name of the extracted CSS file
        }),
    ],
    mode: 'development',
    devtool: false,
    target: 'node',

}; </pre>

main.bundle.js

<pre>var WebPack;
/******/ var __webpack_modules__ = ({

/***/ "./Scripts/common/common.js":
/*!********************************************!*\
  !*** ./Scripts/common/common.js ***!
  \********************************************/
/***/ (() => {


            var common = (function () {

                return {
    ,
                };
            })();



            /***/
}),

/***/ "./Scripts/common/header.js":
/*!****************************************************!*\
  !*** ./Scripts/common/header.js ***!
  \****************************************************/
/***/ (() => {

            var header = (function () {



                return {

                };

            })();

            /***/
}), </pre>

index.js

<pre>
import './Styles/common/header.less';
import './Styles/common/import.less';



import './Scripts/common/common';
import './Scripts/common/header';
 </pre>

Answer 1

Try adding an environment object with arrowFunction set to false as shown below. I works for me if you have both the arrowFunction and the iife set to false.

See also https://webpack.js.org/loaders/babel-loader/#top-level-function-iife-is-still-arrow-on-webpack-5

output: {
    // ...
    environment: {
        arrowFunction: false    // prevent top level arrow IIFE on Webpack 5
    },
    // ...
    iife: false,    // prevent top level IIFE on Webpack 5
}