使用 Webpack 4 时如何访问入口文件中的 jQuery 对象 ($)？答案

【问题标题】：How do you access the jQuery object ($) in an entry file when using Webpack 4?使用 Webpack 4 时如何访问入口文件中的 jQuery 对象 ($)？
【发布时间】：2018-09-02 19:20:32
【问题描述】：

我有一个非常简单的 Webpack 4 示例，我试图访问我的条目文件中的 jQuery 对象以操作 DOM。我已经把它缩减到我认为是经过广泛研究的最低限度。

我希望该示例在页面加载时将body 的背景颜色设置为青色。似乎无法让它做任何事情。看起来入口文件中暴露的$ 变量与浏览器中的$ 变量不同。

更新 - 问题已解决：我在下面滥用了jQuery。

原始（有缺陷的）入口文件（src/app.js）：

import 'jquery';

$(() => {
  $('body').bgColor = 'cyan';
});

更正条目文件：

import 'jquery';

$(() => {
  $('body').css('background-color', 'cyan');
});

我使用ProvidePlugin 记录的here。这是我的简单webpack.config.js 文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require("webpack");

module.exports = {
  entry: {
    app: './src/app.js',
  },
    output: {
      filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      }),
      new HtmlWebpackPlugin()
    ],
    devtool: 'inline-source-map'
}

Webpack 编译得很好并且页面打开了（使用webpack-dev-server），但是背景颜色并没有像预期的那样变成青色。当我在app.js 文件中记录$('body') 的值时，我得到undefined。

这是package.json 文件：

{
  "name": "foo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --inline --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  },
  "dependencies": {
    "jquery": "^3.3.1"
  }
}

感觉我根本不了解这应该如何工作。谢谢。非常感谢您的帮助。

【问题讨论】：

jQuery 对象没有bgColor 会影响元素的属性。使用css()方法或访问原生元素$('body')[0]
是的@charlietfl，谢谢。我的错。将 jQuery 调用更改为使用 css() 函数，一切正常。一线希望 - 有一个其他人可以使用的简单示例。我会发布答案并将这段代码放在 Github 的某个地方。

标签： jquery webpack-4

【解决方案1】：

抱歉。我对滥用 jQuery 的错误。感谢@charlietfl 指出我在 cmets 中的错误。我用了。 $('body').bgColor = "cyan" 而不是 $('body').css('background-color', 'cyan')。其他一切都已正确配置。所以如果你需要一个简单的例子，这里就是。

我将编辑问题并指出我的错误。

【讨论】：