删除Webpack的IIFE模块 Package 以生成行JS脚本包文件

yxyvkwin  于 2023-10-19  发布在  Webpack
关注(0)|答案(1)|浏览(142)

我在我的.net应用程序中使用Webpack 5来捆绑我的JavaScript和LESS文件。我有多个JavaScript文件,需要将它们捆绑到一个文件中。在捆绑到一个文件中之后,每个单独的JavaScript都被IIFE模块 Package 。现在我已经在我的JavaScript中使用了IIFE。所以需要去掉那些IIFE Package 。我已经试过“生活:在输出中显示“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>
f87krz0w

f87krz0w1#

尝试添加一个environment对象,并将arrowFunction设置为false,如下所示。如果你把arrowFunctioniife都设置为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
}

相关问题