移除Webpack的IIFE模块包装以生成行JS脚本捆绑文件

Question

我在 .net 应用程序中使用 Webpack 5 来捆绑 JavaScript 和 LESS 文件。我有多个 JavaScript 文件，需要将它们捆绑到一个文件中。捆绑到一个文件后，每个单独的 javascript 都用 IIFE 模块包装。现在我已经在 JavaScript 中使用 IIFE 了。所以需要去掉那些IIFE包裹。我已经在输出中尝试过“iife: false”。但它只适用于单个 javascript 文件，当我有多个 js 文件时，它不起作用。有什么办法可以实现这个目标吗？

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

尝试添加一个

environment

对象，并将

arrowFunction

设置为

false

，如下所示。如果您将

arrowFunction

和

iife

设置为

false

，我就为我工作。

另请参阅 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
}