[英]How do you access the jQuery object ($) in an entry file when using Webpack 4?
我有一个非常简单的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"
}
}
像我这样的感觉根本上不了解应该如何工作。 谢谢。 非常感谢您的帮助。
道歉。 我误用jQuery的错误。 感谢@charlietfl指出我在评论中的错误。 我用了。 $('body').bgColor = "cyan"
而非$('body').css('background-color', 'cyan')
。 其他所有内容均已正确配置。 因此,如果您需要一个简单的示例,就在这里。
我将编辑问题并指出我的错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.