Webpack не может использовать jQuery - PullRequest
Новая
       5

Webpack не может использовать jQuery

0 голосов
/ 16 июня 2020

Я начинаю использовать webpack (версия 3), и когда я пытаюсь использовать jQuery из моего файла «app. js», ничего не происходит: я npm install --save jquery и: 

import $ from 'jquery'
$('body').css('backgroundColor', '#DD0000')

document.body.style.backgroundColor = "red";

И когда я пытаюсь изменить css, используя document.body.style.backgroundColor = "red"; он сообщает мне, что "не могу прочитать стиль свойства null"

Но в остальном он работает, я имею в виду, что я успешно это пробовал: 

import json from "./test"
console.log(json)

Вот моя HTML головная часть: 

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Webpack</title>
   <link rel="stylesheet" href="./styles.css">
   <script src="./dist/bundle.js"></script>
</head>

Вот моя конфигурация веб-пакета: 

const path = require("path");
const uglify = require("uglifyjs-webpack-plugin");


module.exports = {
    watch: true,
    entry: './app.js',
    output: {
        path: path.resolve('./dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                use: ["babel-loader"],
            }
        ]
    },
    plugins: [
        new uglify(),
    ]
}

Вы знаете, что я делаю не так?

1 Ответ

0 голосов
/ 16 июня 2020

Вы вставили свой скрипт в раздел <head>. И поскольку JS является блокирующим , он выполняется прямо здесь, до того, как <body> будет проанализирован и существует (так что это null).

Если вы хотите, чтобы это работало, либо поместите свой сценарий в конец документа, прямо перед закрывающим тегом </body>, или дождитесь загрузки документа: 

window.addEventListener('DOMContentLoaded', function() {
 // Here, you can use document.body
});

или, в синтаксисе jQuery: 

$(function() {
 // Here, you can use document.body
});
...