webpack is an incredibly powerful tool, but finding examples of simple things are far and few between. i spent the better part of the day trying to figure out how to include jQuery as part of the global scope. first the sample webpack.config.js file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var path = require('path'); module.exports = { entry: { app: './resources/js/app.js' }, resolve: { alias: { jquery: path.resolve(__dirname, 'resources', 'js', 'jquery-1.11.3.min.js') } } }; |
in the webpack.config.js file, you need to add a section in resolve and set up an alias (jquery) to the jQuery file. once that’s done, you need to add a line in your entry file to expose jQuery as a global via the expose loader.
in app.js:
|
1 |
require('expose?$!expose?jQuery!jquery'); |
in this example, we are running the expose loader plugin twice to bind $ and jQuery to global scope.
also in your project, make sure to include the expose loader via the npm command:
|
1 |
npm install expose-loader --save |
and that’s it! jQuery is now bound to global scope as if you did a call.
I’m not sure when it was implemented, but I just read up how to do this in Browserify using ‘global.jQuery = require(“jquery”);’ and this seems to work the same in webpack as well.
Thanks, finally a working example !
I visit daily a few sites and sites to read posts,
however this webpage presents feature based writing.
I go to see everyday a few web pages and sites to read articles or reviews, however this weblog presents quality based posts.