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

Posted 2023-03-16

【中文标题】在 Node.js 应用程序中使用 Webpack 时出现类型错误“无法读取未定义的属性‘jquery’”

【英文标题】：TypeError "Cannot read property 'jquery' of undefined" while using Webpack in Node.js app

【发布时间】：2021-04-21 17:35:36

【问题描述】：

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

https://github.com/webpack/webpack/issues/4258 jQuery is not defined (using Webpack) https://webpack.js.org/loaders/expose-loader/

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

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"
  

【参考方案1】：

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