在 Webpack 4 中与本地 js 文件(第三方库)捆绑时出现问题

Question

我很难尝试使 Webpack 4 配置工作。首先，我没有在 Node.js 服务器上运行;我在使用.Net MVC的IIS上。如何在我的 webpack 配置文件中加载本地 js 文件？

这是我的webpack.config.js的样子：

const webpack = require('webpack');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: {
        'ICC.js':
        [
            path.resolve(__dirname, 'Scripts/dependencies.js'),
            path.resolve(__dirname, 'Scripts/ICC/Helpers.js'),
            path.resolve(__dirname, 'Scripts/ICC/Layout.js'),
            path.resolve(__dirname, 'Scripts/ICC/ICC_Chart.js'),
            path.resolve(__dirname, 'Scripts/ICC/AddModDel.js'),
            path.resolve(__dirname, 'Scripts/Cache/CacheClientTemplate.js'),
            path.resolve(__dirname, 'Scripts/ICC/Menu_ICC.js'),
            path.resolve(__dirname, 'Scripts/ICC/ICCObjetLie.js'),
            path.resolve(__dirname, 'Scripts/Observable/observable.js'),
            path.resolve(__dirname, 'Scripts/Soumission/produitLigne.js'),
            path.resolve(__dirname, 'Scripts/Soumission/soumission.js'),
            path.resolve(__dirname, 'Scripts/Soumission/livraison.js'),
            path.resolve(__dirname, 'Scripts/Soumission/transport.js'),
            path.resolve(__dirname, 'Scripts/Soumission/termes.js'),
            path.resolve(__dirname, 'Scripts/Soumission/contacts.js'),
            path.resolve(__dirname, 'Scripts/Soumission/Recherche/minicart.js'),
            path.resolve(__dirname, 'Scripts/Soumission/Recherche/produitRecherche.js'),
            path.resolve(__dirname, 'Scripts/Content/content.js'),
            path.resolve(__dirname, 'Scripts/Opportunite/competiteur.js'),
            path.resolve(__dirname, 'Scripts/Cookie/cookie.js')
        ]
    },
    devtool: "source-map",
    output: {
        filename: '[name]',
        path: path.resolve(__dirname, './dist/scripts')
    },
    module: {
        rules:
        [
            {
                test: /.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                parser: {
                    amd: false, // disable AMD
                    commonjs: false // disable CommonJS
                }
            }
        ],
    },
    optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
            uglifyOptions: {
                mangle: true,
                output: {
                    comments: false
                }
            },
            sourceMap: true,
            exclude: [/.min.js$/gi]
        })]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    plugins: [
        new CleanWebpackPlugin(['./dist'])
    ]
};

在我的依赖项.js中，我有以下内容：

function loaddependencies(scripts) {
    for (var i = 0, len = scripts.length; i < len; i++) {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = scripts[i];
        var x = document.getElementsByTagName('head')[0];
        x.appendChild(s);
    }
}
var dependencies =
    [
        "~/Scripts/jquery/jquery.min.js",
        "~/Scripts/cldr/cldr.js",
        "~/Scripts/cldr/event.js",
        "~/Scripts/cldr/supplemental.js",
        "~/Scripts/globalize/globalize.js",
        "~/Scripts/globalize/message.js",
        "~/Scripts/globalize/number.js",
        "~/Scripts/globalize/currency.js",
        "~/Scripts/globalize/date.js",
        "~/Scripts/bootstrap/bootstrap.min.js",
        "~/Scripts/splitter/jquery.splitter.js",
        "~/Scripts/jquery/jquery.timeago.js",
        "~/Scripts/jquery.signalR.min.js",
        "~/Scripts/lightbox/js/lightbox.min.js",
        "~/Scripts/toolbar/jquery.toolbar.js",
        "~/Scripts/dx.all.js",
        "~/Scripts/devextreme/dx.aspnet.data.js",
        "~/Scripts/devextreme/dx.aspnet.mvc.js",
        "~/Scripts/devextreme/localisation/dx.messages.frca.js"
    ];
loaddependencies(dependencies);

在此之前，我已经尝试了许多解决方案，例如包含提供程序插件以全局公开jquery：

 new webpack.ProvidePlugin({ 
        $: 'jquery', 
        jQuery: 'jquery'
      }) 

跟

test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        },{
          loader: 'expose-loader',
          options: '$'
        }]

然而，这给了我以下错误："未定义要求。(这是正常的，因为我不在节点环境中(。我还添加了

externals: {
    jquery: 'jQuery'
  }

那行不通。我还尝试了以下SO问题(解决方案3,4,5(的解决方案。一切都失败了！我已经在这里待了几个星期，我似乎没有解决方案。我的地狱要做什么才能让它工作？

Answer 1

好吧，在Webpack中玩了几个星期之后，我终于设法找到了解决方案。

基本上，我必须将其分解为4个打字稿文件;每个文件都包含要导入的所有必要的本地js脚本。在一个只包含jQuery的文件中，我必须执行以下操作：

import "expose-loader?$!jquery";
import "expose-loader?jQuery!jquery";

然后所有其他打字稿文件都包含本地 js 文件的导入语句。

我的 webpack.config.js 文件如下所示：

const webpack = require('webpack');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const mainScripts = {
    mode: 'development',
    entry: path.resolve('./Scripts/tsScripts/main.ts'),
    devtool: "source-map",
    output: {
        filename: 'mainScripts .js',
        path: path.resolve(__dirname, './dist/scripts')
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },
    module: {
        rules:
        [
            {
                test: /.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /.tsx?$/,
                use: 'ts-loader'
            },
            {
                parser: {
                    amd: false
                }
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['./dist'])
    ],
    optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
            uglifyOptions: {
                mangle: true,
                output: {
                    comments: false
                }
            },
            sourceMap: true,
            exclude: [/.min.js$/gi]
        })]
    },
};
const scriptDependencies = {
    mode: 'development',
    entry: path.resolve('./Scripts/tsScripts/dependencies.ts'),
    output: {
        filename: 'scriptDependencies.js',
        path: path.resolve(__dirname, './dist/scripts')
    },
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            Globalize$: path.resolve(__dirname, "Scripts/globalize/globalize.js"),
            Globalize: path.resolve(__dirname, "Scripts/globalize/globalize"),
            cldr$: path.resolve(__dirname, "Scripts/cldr/cldr.js"),
            cldr: path.resolve(__dirname, "Scripts/cldr/cldr")
        }
    },
    module:
    {
        rules:
            [
                {
                    test: /.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /.tsx?$/,
                    use: 'ts-loader'
                },
                {
                    test: require.resolve('globalize'),
                    use: [{
                        loader: 'expose-loader',
                        options: 'Globalize'
                    }]
                },
                {
                    parser: {
                        amd: false
                    }
                }
            ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            Globalize: 'Globalize'
        })
    ],
    optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
            uglifyOptions: {
                mangle: true,
                output: {
                    comments: false
                }
            },
            sourceMap: true,
            exclude: [/.min.js$/gi]
        })]
    },
};
const scriptDevExt = {
    mode: 'development',
    entry: path.resolve('./Scripts/tsScripts/devext.ts'),
    output: {
        filename: 'scriptDevExt.js',
        path: path.resolve(__dirname, './dist/scripts')
    },
    resolve: {
        extensions: ['.js'],
    },
    module:
    {
        rules:
        [
            {
                test: /.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                parser: {
                    amd: false
                }
            }
        ]
    },
    optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
            uglifyOptions: {
                mangle: true,
                output: {
                    comments: false
                }
            },
            sourceMap: true,
            exclude: [/.min.js$/gi]
        })]
    },
};

const jqueryDep= {
    mode: 'development',
    entry: path.resolve('./Scripts/tsScripts/jqueryDependency.ts'),
    output: {
        filename: 'jqueryDep.js',
        path: path.resolve(__dirname, './dist/scripts')
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"],
        alias: {
            jquery: path.resolve('./Scripts/jquery/jquery.min.js')
        }
    },
    module: {
        rules:
            [
                {
                    test: /.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /.tsx?$/,
                    use: 'ts-loader'
                },
                {
                    test: require.resolve('jquery'),
                    use: [{
                        loader: 'expose-loader',
                        options: 'jQuery'
                    }, {
                        loader: 'expose-loader',
                        options: '$'
                    }]
                },
                {
                    parser: {
                        amd: false
                    }
                }
            ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            "window.jQuery": 'jquery'
        })
    ],
    optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
            uglifyOptions: {
                mangle: true,
                output: {
                    comments: false
                }
            },
            sourceMap: true,
            exclude: [/.min.js$/gi]
        })]
    },
};
module.exports = [jqueryDep, scriptDependencies, scriptDevExt , mainScripts ];

它终于正常工作了。