jquery - Webpack - $ is not a function -
i moving existing webapp requirejs webpack.
i have issue way jquery imported/shimmed.
in bundled js, getting $ not function error within bootstrap javascript.
when console.log($) within bundled script reveals empty object: object {}
i assuming because nothing exported jquery traditionally set $ window object , done.
some research pointed me use webpack plugins (see webpack.config.js below) doesn't appear solve issue.
is there wrong in 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" } ] } } the offending compiled bundle 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 apache license, version 2.0 (the "license"); * may not use file except in compliance license. * may obtain copy of license @ * * http://www.apache.org/licenses/license-2.0 * * unless required applicable law or agreed in writing, software * distributed under license distributed on "as is" basis, * without warranties or conditions of kind, either express or implied. * see license specific language governing permissions , * limitations under license. * ========================================================== */ !function ($) { console.log($); //this gives empty object {} "use strict"; // jshint ;_; /* css transition support (http://www.modernizr.com/) * ======================================================= */ $(function () { //$ not function occurs here $.support.transition = (function () { ......... .........
you can 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 problem can in providerplugin doesn't read jquery alias, try:
new webpack.provideplugin({ $: "libs/jquery-1.9.1", jquery: "libs/jquery-1.9.1", "window.jquery": "libs/jquery-1.9.1" })
Comments
Post a Comment