如何移除Webpack 5的IIFE模块包裹生成原始JS脚本包

我在.NET应用中使用Webpack 5打包JavaScript和LESS文件，需要将多个JS文件合并为一个。但打包后每个独立JS文件都被IIFE模块包裹，而我自己的JS代码已经用IIFE封装了，所以得移除Webpack自动添加的这些IIFE包裹。我试过在output里设置iife: false，但这个配置只在单个JS文件时生效，多文件场景下没用，请问怎么实现需求？

现有配置文件 #

webpack.config.js #

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

module.exports = {
    entry: {
        main: './index.js',
    },
    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/',
                        },
                    },
                ]
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'styles.css',
        }),
    ],
    mode: 'development',
    devtool: false,
    target: 'node',
};

index.js #

import './Styles/common/header.less';
import './Styles/common/import.less';

import './Scripts/common/common';
import './Scripts/common/header';

打包后的main.bundle.js片段 #

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 {
                    // 代码内容
                };

            })();

            /***/
}), 

解决方案 #

1. 调整output与target配置，明确浏览器环境目标 #

你之前设置了library但未指定libraryTarget，且target设为node（适配Node环境而非浏览器），导致Webpack仍用模块函数包裹每个文件。修改配置如下：

output: {
    path: path.resolve(__dirname, './wwwroot/js/webpack'),
    filename: 'main.bundle.js',
    library: 'WebPack',
    libraryTarget: 'window', // 将库挂载到window对象，适配浏览器环境
    iife: false,
    clean: true,
},
target: 'web', // 改为浏览器目标环境

2. 使用script-loader直接加载自执行JS文件 #

如果你的JS文件已经是IIFE封装的自执行代码，不需要Webpack处理模块依赖，可通过script-loader导入，避免额外包裹：

• 安装依赖：

npm install script-loader --save-dev

• 修改index.js的导入方式：

import './Styles/common/header.less';
import './Styles/common/import.less';

// 用script-loader加载JS文件，跳过模块包裹
import 'script-loader!./Scripts/common/common';
import 'script-loader!./Scripts/common/header';

3. 禁用Webpack模块解析（无模块场景） #

如果项目完全不需要模块系统，可关闭CommonJS模块解析，阻止Webpack自动包裹模块：
在webpack.config.js的module中添加parser配置：

module: {
    parser: {
        javascript: {
            commonjs: false, // 禁用CommonJS模块解析逻辑
        },
    },
    // 原有rules...
}

为什么之前的iife: false无效？ #

iife: false仅控制最外层代码是否被IIFE包裹，而多文件打包时，Webpack默认会用模块函数（如(() => { ... })()）包裹每个单独的模块文件，这个行为不受iife配置影响，需要通过上述方法调整模块处理逻辑。

内容的提问来源于stack exchange，提问作者Malinthaz1991