Webpack - $ is not a function

Question

I am moving an existing webapp from requirejs to webpack.

I have a problem with how jQuery is imported / moved.

In my js bundle, I get the error $ is not a function from javascript for bootstrap.

When I console.log($) from the built-in script, it shows an empty object: object {}

I assume this is because nothing is exported from jQuery, since it traditionally sets $ to the window object and will be executed.

In some studies, I drew attention to the use of webpack plugins (see below my webpack.config.js), but this does not seem to solve the problem.

Is something wrong in my setup?

thanks

My webpack.config.js:

  var path = require('path'); var webpack = require('webpack'); module.exports = { //devtool: 'source-map', entry: ['./mobile.js'], resolve: { root: "./js/", alias: { jquery: 'libs/jquery-1.9.1', underscore: "libs/lodash-1.0.1", //backbone: 'libs/backbone-1.0.0', backbone: 'libs/backbone-0.9.10', bootstrap: "libs/bootstrap-2.3.1", ...... } }, resolveLoader: { root: path.join(__dirname, 'node_modules') }, output: { path: './', filename: 'bundle.js' }, plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }) ], module : { loaders: [ { test: /\.html$/, loader: "text" }, { test: /\.json$/, loader: "json" } ] } } 

Offensive compiled package code:

 /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/* =================================================== * bootstrap-transition.js v2.3.1 * http://twitter.github.com/bootstrap/javascript.html#transitions * =================================================== * Copyright 2012 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * ========================================================== */ !function ($) { console.log($); //THIS GIVES THE EMPTY OBJECT {} "use strict"; // jshint ;_; /* CSS TRANSITION SUPPORT (http://www.modernizr.com/) * ======================================================= */ $(function () { //$ IS NOT A FUNCTION OCCURS HERE $.support.transition = (function () { ......... ......... 

Answer 1

You can also try exports-loader :

 npm install --save-dev exports-loader 

And config:

 { include: require.resolve('libs/jquery-1.9.1'), loader: 'exports-loader?window.jQuery' } 

---

OR the problem may be that ProviderPlugin not reading the jquery alias, so try:

 new webpack.ProvidePlugin({ $: "libs/jquery-1.9.1", jQuery: "libs/jquery-1.9.1", "window.jQuery": "libs/jquery-1.9.1" })