Webpacking jQuery and custom files: jQuery is undefined

Question

I'm using webpack to concatenate JS libraries and JS files of my own. Currently the setup is like this

var wpStream = require('webpack-stream')';
var files = ['jquery.js', 'angular.js', 'app.js', 'controller.js', 'etc.js'];

gulp.task('pack', function(){
  return gulp.src(files)
    .pipe(wpStream({
      output:{filename: 'bundle.js'}
    }).pipe(gulp.dest('dist'));
});

This works well. My file is created and it has all of the content specified in my files array. However on page load, I get the error jQuery is not defined. Additionally, in my console when I type jQuery there is not jQuery, but rather jQuery111206520785381790835. And when I append a dot to see the list of methods, there's just the normal object methods (hasOwnProperty, toString, etc).

How do I access jQuery? What has webpack done with it?

Possible Duplicate : http://stackoverflow.com/questions/2194992/jquery-is-not-defined — Umair Shah Yousafzai, May 13 '16 at 21:41
Minor Typo - `'app.js` doesn't have a closing quote. Don't know if that's the cause... — , May 13 '16 at 21:43
Also are you sure that your jQuery is loading properly?? Check your jQuery path there may be some problem with that..! — Umair Shah Yousafzai, May 13 '16 at 21:45
@UmairShahYousafzai I can see in the network panel that it's loaded. — 1252748, May 13 '16 at 22:00
Then may be some jQuery file would be loading before the jQuery library which may be causing it? — Umair Shah Yousafzai, May 13 '16 at 22:02
@UmairShahYousafzai `Additionally, in my console when I type jQuery there is not jQuery, but rather jQuery111206520785381790835.` The script is on the page. It's just getting renamed somehow. — 1252748, May 13 '16 at 22:25
And does that changes the numbers when you try to do it again and again?? — Umair Shah Yousafzai, May 13 '16 at 22:28
Try to load only jQuery first and then see if you are still getting the same problem then if you are not so then add load another one library for loading and go on like that until last you will see where you are really getting this problem..! — Umair Shah Yousafzai, May 13 '16 at 22:31

Steffen · Answer 1 · 2016-05-16T17:15:54.030

0

You have to make jQuery globally accessible with webpack ProvidePlugin

var webpack = require('webpack');
var wpStream = require('webpack-stream');
var path = require('path');
var files = ['app.js', 'controller.js', 'etc.js'];

gulp.task('pack', function () {
    return gulp.src(files)
        .pipe(wpStream(
            {
                output: {
                    filename: 'bundle.js'
                },
                plugins: [
                    new webpack.ProvidePlugin({
                        angular: "angular",
                        $: "jquery",
                        jQuery: "jquery"
                    })
                ],
                resolve: {
                    root: path.resolve('./vendor'), // directory that contains jquery.js and angular.js
                    extensions: ['', '.js']
                }
            }
        ).pipe(gulp.dest('dist'));
});

edited May 16 '16 at 17:15

answered May 14 '16 at 16:05

Steffen

3,079
1
28
30

`{ cache: false, output: { filename: 'bundle.js' }, module: { }, plugins:[ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ], debug: false }` is the entire config object that i pass to `wpStream`. It still isn't working though. Any ideas? – 1252748 May 16 '16 at 16:03
Also note that I'm not using npm to include jQuery. I have it in a local file. `files` array contains the directory it is in. – 1252748 May 16 '16 at 16:10
Are you using the $ or jQuery var in your modules or in the browser console? The ProvidePlugin will only resolve these global variables at build time in your modules that are bundled with webpack. https://webpack.github.io/docs/shimming-modules.html#plugin-provideplugin – Steffen May 16 '16 at 16:31
I use `jQuery`, not `$`. – 1252748 May 16 '16 at 16:39
It might also help to add resolve configuration for jquery.js and angular.js modules based on your folder structure: `var path = require('path'); // ... resolve: { root: path.resolve('./vendor'), extensions: ['', '.js'] }` and remove those files from the array – Steffen May 16 '16 at 16:45
where would that go in the config? within plugins? – 1252748 May 16 '16 at 17:03

Webpacking jQuery and custom files: jQuery is undefined

How do I access jQuery? What has webpack done with it?

1 Answers1