Webpack externals from CDN for a UMD application

321 views Asked by At

I am trying to configure Webpack externals so that some of my deps don't end up in the bundle of my UMD application. I've read the doc about external CDN https://webpack.js.org/configuration/externals/ , however I have the impression that the option doesn't work when the library target is 'UMD' in the output:

output: {
        filename: 'scripts/[name].js',
        path: path.resolve(__dirname, '../build/'),
        libraryTarget: 'umd'
    } 

Here is how I'm expecting it to work:

externals: {
    'lodash': ['https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js', '_']
}

But I'm getting build errors whenever I configure this:

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:dev: `npx webpack --config ./config/webpack.config.dev.js`
npm ERR! Exit status 1

Just to give a bit more context: I'm working on a site with a lot of different vendors and me and my team have built multiple apps running on that site. Those apps we have been developing are using some common libraries like lodash/jquery/moment/... and sometimes the exact same versions of those libraries so I'd like to use CDNs instead of bundling the same code in those individual apps. That will allow the end user to only load the library once.

So far we have already been using requirejs where some configs can allow us to achieve this. For instance with this lodash require config:

 window.requirejs.config({
            paths: {
                'lodash': '//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min'
            }
        });

I can easily use lodash as external in webpack:

externals: {
    'lodash': 'lodash'
}

and it works well... But my goal is really to be flexible when it comes to the version of the library an that's why I'm trying to add the CDN straight into the webpack external config.

Thanks in advance for you help :-)

webpack version 4.42.0

0

There are 0 answers