Using Webpack with Externals

How would you go about setting up Vue, Lodash, Bootstrap, and jQuery as externals using the 5.4 webpack system?

I don't need a 1MB .js file that needs to be recompiled and redownloaded every time I update my code which would otherwise be under 100k. Those jQuery, Bootstrap and other libraries are going to be cached by ISPs and, even when not, able to be pulled from much faster CDNs than trying to pull them from my system (plus they can be cached on the user side as well). From my understanding, instead of compiling the code of jQuery, etc into your app.js file, webpack could use externals to compile your stuff in the expectation that, even if $, _, and Vue aren't around now, they will be at runtime. I used to use browserify-shim for this with Elixir.

So how would I go about getting "npm run dev" or "npm run production", etc to use those common libraries as externals?

kaylakaze

9 years ago

Level 2

If anyone else wants to know this, I've figured it out. Add the following to your webpack.mix.js file before the .js function

.webpackConfig({
        externals:{
            'lodash':'_',
            'jquery':'jQuery',
            'vue':'Vue'
        }
    })

and then make sure you load Lodash, Vue, and jQuery using script tags in your pages. My app.js is 64kB instead of 1.1MB doing it this way.

Please or to participate in this conversation.