Configuring WebPack with Moment TimeZone CDN

Question

I am using WebPack 4 to build my TypeScript applications.

One of my modules uses the moment-timezone library, for example...

import * as moment from 'moment-timezone';
$('#label-locale').text(moment.locale());

and this works as expected.

To make better use of caching, I would like to reference moment and moment-timezone from a Content Delivery Network (CDN) and have added the following to my HTML page:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.min.js"></script>

I also modified the webpack.config.js as follows:

module.exports = {
    externals: {
        'jquery': 'jQuery',
        'moment': 'moment-timezone'
    }
};

Now, when I run my code, I get the following error:

ReferenceError: timezone is not defined

I am new to WebPack and have tried things like adding 'timezone': 'moment-timezone' to the externals without success.

Any help/direction would be very much appreciated.

Answer 1

I was over-thinking this. moment-timezone actually 'just' extends the moment object to include moment.tz, so all I had to do was modify the webpack.config.js as follows:

module.exports = {
    externals: {
        'jquery': 'jQuery',
        'moment-timezone': 'moment'
    }
};

So instead of WebPack effectively building the whole definition tree from the node_modules/moment-timezone the moment object had already been updated by the CDN reference. At least, I think that is what is happening.