webpack + Moment.js
“It is, what it is”, so we just have to deal with it.
onto the problem
Our initial problem was that we couldn’t even get webpack to build moment into the bundle:
grunt shell:webpackDev resulted in:
WARNING in ./node_modules/moment/min/moment-with-locales.js Module not found: Error: Can't resolve './locale' in '/Users/oloreb/dev/redbox-pay/redbox_angular/node_modules/moment/min' @ ./node_modules/moment/min/moment-with-locales.js 263:16-43 @ ./webpack-config/vendor.ts
The quick fix was to ignore the locale resolution, because moment-with-locales.js already had them:
new webpack.IgnorePlugin(/\.\/locale$/, /moment\/min/)
But after looking at the BundleAnalyzer, we realized we were bringing in way too many locales. Much has been written about how to do this, so we stood on the shoulders of the giants and made the following changes:
We tweaked vendor.ts to include moment instead of moment-with-locale and replaced the IgnorePlugin with this
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en|fr|es|zh|pt|nl|de|it/),
and now our analyzer output looks like this:
140k to 29k !
And that’s the gzip comparison!
A quick update to our TODO list:
- Create vendor.min.js
- Create app-components.min.js
- Create app.min.js
- Create templates.app.min.js
- Try out webpack 3.0!
Figure out what’s up with moment.js
- Use the webpack’d files in karma for unit tests
- Try the CommonChunksPlugin
- Handle CSS/LESS/SASS
- Use the dev-server instead of grunt-contrib-connect