Как подключить jQuery в Gulp4, используя webpack-stream и webpack.ProvidePlugin?

Question

[Влад]

Решил заморочиться и скрестить Gulp с Webpack. Плохо это или хорошо оставим за скобками.
В вебпаке это делается через плагин вебпака webpack.ProvidePlugin()

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

В Gulp я делаю вот такой вот пердимонокль:

...
webpack = require('webpack'),
webpackStream = require('webpack-stream');
...
// Сбор js
gulp.task('js:build', function () {
    return gulp.src(path.src.js)
        .pipe(webpackStream({
            output: {
                filename: 'main.js',
            },
            module: {
                rules: [
                    {
                    test: /\.(js)$/,
                    exclude: /(node_modules)/,
                        loader: 'babel-loader',
                        query: {
                            presets: ['@babel/env']
                        }
                    },
                ]
            },
            plugins: [
                new webpack.ProvidePlugin({
                    $: 'jquery',
                    jQuery: 'jquery'
                }),
            ],
            mode: "production",
            // externals: {
            //     jquery: 'jQuery'
            // }
        }))
        .pipe(gulp.dest(path.build.js))
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest(path.build.js))
        .pipe(webserver.reload({ stream: true }));
});

Выдается следующая ошибка:

[21:40:41] 'js:build' errored after 7.55 s
[21:40:41] Error: module property was removed from Dependency (use compilation.m
oduleGraph.updateModule(dependency, module) instead)
    at ProvidedDependency.set (C:\.........\node_modules\we
bpack\lib\Dependency.js:226:9)

В чём собственно говоря здесь затык?
Как вообще подключать плагины для вебпака в галп, используя webpack-stream?

Answer 1

[Евгений Щербаков]

Можете тут посмотреть как сделано или вообще использовать этот шаблон, он вроде хорошо сделан.
https://github.com/agragregra/OptimizedHTML-5

Comments

[Влад]

Здесь в вебпак-стриме нет метода webpack.ProvidePlugin
и сборка работает только если нет последующих импортов.

Т.е. вот это работает:

// Entry point

import $ from 'jquery';
window.jQuery = window.$ = $;

console.log($('body'));

А уже вот это НЕ РАБОТАЕТ:

// Entry point

import $ from 'jquery';
window.jQuery = window.$ = $;

// increment some jQuery code
import './some-jquery-code';

Получается как и в случае с предыдущим оратором консоль говорит:
Uncaught ReferenceError: jQuery is not defined

[Евгений Щербаков]

Влад, https://www.youtube.com/watch?v=1Ivxl4aoK0w

[Влад]

Евгений Щербаков,
Блин, всего то надо было по всем файлам пробежаться и скормить их все вебпаку!
Конечно, я же только один передавал.
return src(['app/js/*.js')
Благодарю!

P.S. Но почему же другие библиотеки у меня импортировались без проблем кроме jquery в рамках одного main.js ?

[Евгений Щербаков]

Влад, возможно разными методы импорта использовали, например import и require

Так даже сразу и не скажу в чем проблема с jQuery

[Влад]

Евгений Щербаков,

В общем, у меня получился вот такой вот таск. Как видно из кода, для того, чтобы на продакшене удалять абсолютно все комментарии из кода, я прикрутил сюда uglifyjs-webpack-plugin.
Зашло :)

// всё дерево в топике писать нет смысла
path.src.js = 'assets/src/js/*.js';

// сбор js
gulp.task('js:build', function () {
    return gulp.src(path.src.js) //   получаем все файлы на входе
        .pipe(webpackStream({
            mode: "production",
            output: {
                filename: 'main.js',
            },
            module: {
                rules: [
                    {
                        test: /\.(js)$/,
                        exclude: /(node_modules)/,
                        loader: 'babel-loader',
                        query: {
                            presets: ['@babel/env'],
                            plugins: ['babel-plugin-root-import']
                        }
                    },
                ]
            },
            optimization: {
                minimizer: [
                  new UglifyJsPlugin({
                    uglifyOptions: {
                      output: {
                        comments: false,
                      },
                    },
                  }),
                ],
            }
        })).on('error', function handleError() {
            this.emit('end')
        })
        .pipe(gulp.dest(path.build.js))
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest(path.build.js))
        .pipe(webserver.reload({ stream: true }));
});

Нормальный такой у меня стартер кит выходит, вымученный :) надо будет причесать и полную версию на гитхабе опубликовать :)

[Евгений Щербаков]

Влад, неплохо)
Но мне вроде всегда хватало это шаблона, который скинул тебе изначально :)

Answer 2

[Ilya Olovyannikov]

Я либы обычно подключаю es6 модулями, а в вебпаке настраиваю babel

Comments

[Влад]

Можно рабочий пример?

[Ilya Olovyannikov]

Влад, https://codepen.io/Olovyannikov/pen/yLaJdaq

[Влад]

Ilya Olovyannikov, в каждом скрипте, который использует jQuery импорты что-ли делать? Через webpack-stream и ProvidePlugin в нём нереально в галпе сделать?

[Ilya Olovyannikov]

Влад, один раз импортируешь глобально и все)