在 Node.js 应用程序中使用 Webpack 时出现类型错误“无法读取未定义的属性 'jquery'”

Question

警告：我是一名现在的学生，对所有这些都非常陌生，很可能是我错误地应用了解决方案。 我至少尝试过应用可以在以下三个链接中找到的解决方案，但同样的问题仍然存在：

1. https://github.com/webpack/webpack/issues/4258
2. jQuery 未定义（使用Webpack）
3. https://webpack.js.org/loaders/expose-loader/

我添加了import $ from "jquery"; 到我的入口文件的顶部，这是我的 webpack.config 文件的当前 state：

const path = require('path');
const webpack = require('webpack');
require('bootstrap');


module.exports = {
    module: {
        rules: [
            {
                test: require.resolve('jquery'),
                loader: 'expose-loader',
                options: {
                    exposes: {
                        globalName: "$",
                        override: true

                    },
                }
            }
        ],
    },

    // assigns root of bundle and beginning of dependency graph (default is ./src/index.js)
    entry: './assets/js/script.js',
    // webpack will bundle code at entry point and output into folder specified folder (default is ./dist/main.js)
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.bundle.js'
    },
    // default is 'production' mode, which will minify code automatically; in this case we do not want this feature
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
        }),
    ],
    mode: 'development'
};

最后，这是我的 package.json：

{
  "name": "food-festival",
  "version": "1.0.0",
  "description": "",
  "main": "assets/js/script.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack --watch",
    "build": "webpack"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "devDependencies": {
    "expose-loader": "^1.0.3",
    "webpack": "^5.15.0",
    "webpack-cli": "^4.3.1"
  },
  "dependencies": {
    "bootstrap": "^4.5.3",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1"
  }
}

Answer 1

毕竟……我回答了我自己的问题。 我在 webpack.config 文件的顶部错误地需要引导程序，而不是我的入口文件。 掌心。