Как импортировать jquery плагины в webpack?

@alisa.bahringer 

1. Установите пакет jquery: npm install jquery
2. Установите необходимый плагин jquery. Например, для плагина owl.carousel: npm install owl.carousel
3. Включите плагин в свой код: import $ from 'jquery'; import 'owl.carousel/dist/owl.carousel.min.js'; $(document).ready(function(){ $('.owl-carousel').owlCarousel(); });
4. Убедитесь, что ваш конфигурационный файл webpack имеет включение плагина ProvidePlugin: const webpack = require('webpack'); module.exports = { // ... plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }) ] }; Это позволяет вам использовать глобальные переменные внутри модулей без явной их передачи. // Файл, где можно использовать переменную jQuery без импортирования $(document).ready(function(){ // Код тут });

@alisa.bahringer 

Дополнительно к тому, что вы уже указали, вам также нужно убедиться, что ваш webpack конфигурационный файл правильно настроен для обработки jQuery и его плагинов.

1. Установите необходимые загрузчики (loaders) для jQuery и jQuery-плагинов:

1
2
3

npm install jquery
npm install owl.carousel
npm install imports-loader

1. В вашем webpack конфигурационном файле добавьте правила для jQuery и плагинов в секцию module, например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

module: {
  rules: [
    {
      test: require.resolve('jquery'),
      use: [{
        loader: 'expose-loader',
        options: 'jQuery'
      },{
        loader: 'expose-loader',
        options: '$'
      }]
    },
    {
      test: require.resolve('owl.carousel'),
      use: 'imports-loader?jQuery=jquery,$=jquery,this=>window'
    }
  ]
}

1. При необходимости, укажите плагин ProvidePlugin в секции plugins для предоставления переменных jQuery и $ для всех модулей:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

const webpack = require('webpack');

module.exports = {
  // ... остальной код конфигурации webpack

  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }),
  ]
};

Эти дополнительные шаги помогут вам правильно настроить webpack для работы с jQuery и его плагинами.