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

Question

[Кирилл Карпик]

Здравствуйте. Новичок с 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 и остальные функции. В чем проблема?

Answer 1

[alexhovansky]

1) Указывать при установке нужно флаг --save, при --save-dev в продуктовую сборку jQuery не попадёт;
2) ProvidePlugin нужен как раз таки для того, чтобы не нужно было в каждом файле писать import. $: "jquery" аналогично тому, что в каждом js-файле будет прописан import $;

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

Comments

[Кирилл Карпик]

Спасибо за некоторые разъяснения. Исправил.
Однако я попробовал parcel и он все сам сделал и результат тоже и вроде бы все так и задумывалось, но мне кажется это неправильно.
Моя проблема в том, что функция селектор $ не возвращает jquery объект, а без него не работают функции click, text и все остальные. Вот это решить и не могу

[Кирилл Карпик]

Все, решил. Благодарю за помощь. Проблема даже оказалась в том, что скрипты не запускались - даже console.log не работал. Может быть ваших действий предостаточно, а я просто переборщил с настройками. Убрал jquery из externals и убрав jquery из resolve.alias и (может не из-за этого) заработало.