如何将IIEF或非模块js文件包含到Webpack构建中

Question

我们有一个用Angular 1.4和Grunt编写的应用程序。我们不可能迁移到Angular 2+，因此我们决定至少引入TypeScript并迁移到Webpack。因此，现在我们将一部分文件迁移到TypeScript，并将一部分文件（300+）打包到IIFE中。例如：

    (function () {

'use strict';

    angular.module('q.core').directive('qAlerts', function (alertsService) {
        return {
            restrict: 'E',
            replace: true,
            template: "<div class=\"alerts-container\"><q-alert ng-repeat=\"alert in alerts\"></q-alert></div>",
            link: function (scope) {
                scope.alerts = alertsService.alerts;
            }
        };
    });
})();

尽管我仍然不了解如何将这些JS文件包含到Webpack捆绑包中，但我在stackoverflow上看到了很多答案。我尝试了“脚本加载器”，但它并没有真正帮助我。因此，现在我有了两个索引文件（导入所有TypeScript文件的index.ts和导入所有JS文件的index.js）。处理过的JS文件通常看起来像这样

module.exports = "import './conf/app_conf.js';"

如果有帮助，我也可以附加我的webpack配置。会非常感谢您的帮助。

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = env => {
    return {
        context: __dirname + '/',
        entry: {
            app: './client_app/index.ts',
        },

        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].bundle.js',
        },

        devServer: {
            compress: true,
            contentBase: './dist',
            hot: true,
            port: 3006,
        },

        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader'],
                },
                {
                    test: /\.js$/,
                    exclude: /node_modules|bower_components/,
                    use: [{
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env'],
                        },
                    }, {
                        loader: 'html-loader'
                    }, {
                        loader: 'script-loader'
                    }],
                },
                {
                    test: /\.tsx?$/,
                    loader: 'ts-loader',
                    exclude: /node_modules/,
                },
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: 'style-loader',
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true,
                            },
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true,
                            },
                        },
                    ],
                },
                {
                    test: /\.(jpe?g|png|gif|mp3)$/i,
                    loaders: ['file-loader']
                }, {
                    test: /\.ico$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]'
                            }
                        }
                    ]
                }, {
                    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                limit: 1000,
                                mimetype: 'application/font-woff'
                            }
                        }

                    ]
                }, {
                    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                    loader: 'file-loader'
                }
            ],
        },

        resolve: {
            extensions: ['.ts', '.js'],
            alias:{
                projectDir: path.resolve( __dirname, 'client_app' ),
                images: path.resolve(__dirname, 'client_app', 'images'),
                fonts: path.resolve(__dirname, 'client_app', 'fonts'),
            },
        },

        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery'
            }),
            new CleanWebpackPlugin(['dist']),
            new HtmlWebpackPlugin({
                template: './client_app/index.template.ejs',
            }),
            new webpack.HotModuleReplacementPlugin(),
            new MiniCssExtractPlugin({
                filename: '[name].css',
            }),
        ],

        devtool: 'source-map',
        mode: 'development',
    }
}