How to make friends Webpack + jQuery + jQuery plugins?

Question

JavaScript

Hello!

How to make jquery available in the global scope for plugins and how to actually connect / call these plugins in modules without messing up the paths?
jQuery would like to be included as a module, not a tag.

When building what is, it gives:
ERROR in ./blocks/slider/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./vendor/jquery.js in D:\DEV\webpackbuilder\frontend\ blocks\slider
@ ./blocks/slider/index.js 1:0-29

There is structure and code:

index.js: blocks > slider >> index.js:
require('./blocks/slider');

require('../../vendors/jquery.js');       
require('../../vendors/jquery.slider.js');

vendors
> jquery.js
> jquery.slider.js

config:

var NODE_ENV = process.env.NODE_ENV || 'dev',
    webpack = require('webpack'),
    path = require('path');

module.exports = {
    context: path.resolve(__dirname, "frontend"),
    entry: {
        index: "./index.js",
        about: "./about.js",
    },
    output: {
        publicPath: "./public/built/",
        path: "./public/built/",
        filename: "[name].js"
    },
    watch: NODE_ENV == 'dev',
    devtool: NODE_ENV == 'dev'? 'cheap-inline-module-source-map' : null,
    plugins: [
        new webpack.EnvironmentPlugin('NODE_ENV'),
        new webpack.NoErrorsPlugin(),
        new webpack.ProvidePlugin({
            $: "./vendor/jquery.js"
            /*,
            jQuery: "jquery",
            "window.jQuery": "jquery"*/
        })
    ],
    module: {
        loaders: [
            {
                test: /\.css$/, 
                loader: "style!css" 
            },
            { 
                test: /\.styl$/, 
                loader: 'style!css!stylus' 
            },
            {
                test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
                loader: 'file-loader?name=[name].[ext]'
            }
        ],
    },
    stylus: {
        use: [require('kouto-swiss')()],
        import: ['~kouto-swiss/index.styl', __dirname + '/frontend/commons/vars.styl', __dirname + '/frontend/commons/mixins.styl']
    }

};

if (NODE_ENV == 'prod') {
    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    )
}

Answer 1

It was enough for me to include jQuery in the plugin

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery/dist/jquery.min.js",
    jQuery: "jquery/dist/jquery.min.js",
    "window.jQuery": "jquery/dist/jquery.min.js"
  })
];

(I took the recipe from here as a basis )
After that, in the global scope, all three options for calling jquery will work, you don’t need to connect anything else.
I downloaded jQuery itself via bower, so I additionally connected the paths where the modules will be searched

resolve: {
        root: ['./bower_components']
    }

in your case, I guess 'bower_components' can be replaced with 'vendor' (the path will be from the project root).
require('../../vendors/jquery.js')inside blocks\slider\index.js will no longer be needed, it will be enough just to include the jquery.slider.js file

Answer 2

Alexey Zuev : Thank you.
I figured it out differently, I used the script loader

require('script!../../vendor/slider/jquery.slider.js');

Answer 3

I was still able to connect jQuery, everything was
already so mixed up that I don’t remember exactly, but it seems that I
first installed it
later in the main file - the entry point: and then in webpack.config.js

$: 'jquery',
    '$': 'jquery',
    jquery: 'jquery',
    jQuery: 'jquery',
    'window.jquery': 'jquery',
    'window.jQuery': 'jquery',

But I don't understand how to connect plugins for jQuery! I've been fighting for a week now!
There is a plugin

(function($) {
    "use strict"; // Start of use strict

    // jQuery for page scrolling feature - requires jQuery Easing plugin
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });

    // Offset for Main Navigation
    $('#mainNav').affix({
        offset: {
            top: 100
        }
    })

})(jQuery);

Answer 4

So after all, how to correctly connect scripts to the global scope via webpack?
while version 1 is of interest, but it would be nice to understand version 2
on stackoverflow, and not only there, that even jquery, not to mention modular libraries, is now not connected via webpack.ProvidePlugin, which didn’t work for me either, through the script loader, it is strictly not recommended to do this in the documentation
, how to be?

Answer 5

Webpack 2: https://webpack.js.org/plugins/provide-plugin/
Install jquery via npm and enjoy

Answer 6

In new webpack.ProvidePlugin add You have registered And all calls are made through
window.$