使用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') 。 其他所有內容均已正確配置。 因此，如果您需要一個簡單的示例，就在這里。

我將編輯問題並指出我的錯誤。