Как настроить jquery в webpack?

Здравствуйте. Новичок с webpack. Не хочется подключать jquery через файл, так как он используется на всех страницах поэтому оставил этот вариант на крайний случай. Перепробовал все способы подключения jquery, что видел. Установил jquery через npm
npm install jquery --save-dev

Пробовал
module.exports = {
  //...
  module: {
    rules: {[
    //...
    {
      test: require.resolve('jquery'),
      use: [{
        loader: 'expose-loader',
        options: 'jQuery'
      }, {
        loader: 'expose-loader',
        options: '$'
      }]
    }]
  }
}

И так
module.exports = {
  //...
  plugins: [
    //...
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      "window.$": "jquery"
    })
  ]
}

В обоих случаях и по отдельности в entry файле пробовал
  • import "jquery";
  • import $ from "jquery";
  • require("jquery");

вместе с
window.$ = $;
window.jQuery = $;

но jquery работает странно и на вызов функции $ он возвращает dom узел вместо jquery объекта из-за чего не работают click и остальные функции. В чем проблема?
  • Вопрос задан
  • 184 просмотра
Пригласить эксперта
Ответы на вопрос 1
@alexhovansky
1) Указывать при установке нужно флаг --save, при --save-dev в продуктовую сборку jQuery не попадёт;
2) ProvidePlugin нужен как раз таки для того, чтобы не нужно было в каждом файле писать import. $: "jquery" аналогично тому, что в каждом js-файле будет прописан import $;

Недели 3-4 назад использовал jQuery, никаких плясок с бубном не понадобилось, просто npm i --save jquery, далее просто import $ from 'jquery'.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы