未在使用webpack的ASP.NET核心项目中定义jQuery和$

我正在开发一个ASP.NET核心项目，最近为npm包更换了默认的引导和jQuery库，以便能够对引导进行主题化。然而，我注意到jQuery似乎没有正确加载，或者根本没有加载；出现诸如

$未定义

和

jQuery未定义

之类的错误

我尝试将webpack从v4更新到v5，并根据条目使用dependOn，但这也没有解决问题。我觉得这应该归咎于加载顺序，但我尝试过的一切都不起作用。查看捆绑文件时，jQuery总是最后一个加载的

webpack.config.js：

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

const bundleFileName = 'bundle';
const dirName = 'wwwroot/dist';

module.exports = (env, argv) => {
    return {
        mode: argv.mode === "production" ? "production" : "development",
        entry: ['./node_modules/jquery/dist/jquery.js', './node_modules/bootstrap/dist/js/bootstrap.bundle.js', './wwwroot/js/site.js', './wwwroot/scss/site.scss', './node_modules/jquery-validation/dist/jquery.validate.js', './node_modules/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.js'],
        output: {
            filename: bundleFileName + '.js',
            path: path.resolve(__dirname, dirName)
        },
        module: {
            rules: [
                {
                    parser: {
                        amd: false,
                    },
                    test: /\.s[c|a]ss$/,
                    use:
                        [
                            'style-loader',
                            MiniCssExtractPlugin.loader,
                            'css-loader',
                            {
                                loader: 'postcss-loader', // Run postcss actions
                                options: {
                                    postcssOptions: {
                                        plugins: function () { // postcss plugins, can be exported to postcss.config.js
                                            
                                            let plugins = [require('autoprefixer')];
                                            
                                            if(argv.mode === "production") {
                                                
                                                plugins.push(require('cssnano'));
                                            }
                                            
                                            return plugins;
                                        }
                                    }
                                }
                            },
                            'sass-loader'
                        ]
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin(),
            new MiniCssExtractPlugin({
                filename: bundleFileName + '.css'
            })
        ]
    };
};

package.json：

{
  "name": "proj2aalst-g3",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --progress --profile",
    "production": "webpack --progress --profile --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^4.3.0",
    "cssnano": "^4.1.10",
    "file-loader": "^6.1.0",
    "mini-css-extract-plugin": "^0.11.2",
    "node-sass": "^4.14.1",
    "postcss-loader": "^4.0.2",
    "sass-loader": "^10.0.2",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "@popperjs/core": "^2.9.1",
    "bootstrap": "5.0.0-beta2",
    "jquery": "3.6.0",
    "jquery-validation": "^1.19.3",
    "jquery-validation-unobtrusive": "^3.2.12",
    "postcss": "^8.2.9"
  }
}

---

您必须将jQuery添加到插件中，如下所示：

plugins: [
   new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
   })
]

---

这意味着，如果webpack遇到$或jQuery，它将注入插件。

您必须将jQuery添加到插件中，如下所示：

plugins: [
   new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
   })
]

---

这意味着，如果webpack遇到$或jQuery，它将注入插件。

我忘了补充我已经尝试过了，这是我的错。不幸的是，在构建包并运行应用程序之后，它不会更改任何错误。这肯定是朝着正确的方向迈出的一步，所以我会把它放在那里。我忘了补充说我已经试过了，这是我的错。不幸的是，在构建包并运行应用程序之后，它不会更改任何错误。这肯定是朝着正确的方向迈出的一步，所以我会继续坚持下去。