External Libraries

about 8 years ago by Chris Rivera

Hi

Quick question:

I would like to add an external js library into the project (like a jquery plugin). but any file i put in the assets/js folder doesnt get picked up.

is there a way to tell webpack all the entries from js and the output files?

i have done something like this before in my react projects if i have multiple apps:

entry : {
'dashboard': APP_DIR + '/Dashboard.js',
'client': APP_DIR + '/Client.js'
},
output : {
path : BUILD_DIR,
filename : '[name].bundle.js'
},
module : {
loaders : [ {
test : /.js?/,
include : APP_DIR,
loader : 'babel'
} ]
}

Thank you!

about 8 years ago by Jeff Escalante

Hi Chris,

Anything in your js folder should be written to the output. Check the public folder and you'll see it there. Chances are you have not included it in your html using a script tag.

That being said, with webpack the better move is to use the module system, meaningrequire. To use jquery, for example, you can run npm install jquery --save then const $ = require('jquery') in your main javascript file. This way, webpack will bundle all your scripts together instead of including each one separately, which incurs extra http request overhead (if you aren't on http/2).

You can also configure multiple entries if you'd like, as you suggested -- this works exactly the same in spike as it does in webpack, since spike is an extension of webpack. However, this is typically not recommended unless you are ultra-optimizing for performance (google webpack code splitting), and for smaller sites not using http/2, I'd recommend bundling all your js into a single file.

Also, you are welcome to swing by https://gitter.im/static-dev/spike, our community chat, with questions!

﻿