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

Question

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

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

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

原始(有缺陷(条目文件 (src/app.js(：

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

更正的条目文件：

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

我使用此处记录的ProvidePlugin。 这是我的简单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"
}
}

感觉我从根本上缺乏对这应该如何工作的理解。 谢谢。非常感谢您的帮助。

Answer 1

道歉。 我误用jQuery的错误。 感谢@charlietfl在评论中指出我的错误。我用过。$('body').bgColor = "cyan"而不是$('body').css('background-color', 'cyan').其他所有内容均已正确配置。 因此，如果您需要一个简单的示例，请在此处。

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