A Webpack Survival Guide for Rails Developers
In 2018, I worked on a project to migrate JavaScript asset bundling over from the Rails asset pipeline over to webpack alongside the Webpacker gem. This talk captures some of the mistakes we made, how we fixed them, and highlights general lessons to help Rails developers understand how webpack works and how it differs from its predecessor.
I learned quite a bit (the hard way) helping my team switch our frontend JavaScript application from the Rails asset pipeline to webpack. I decided to distill what I learned into a talk I would have wanted to see before I started. This is that talk.
Presented at RailsConf on April 19, 2018 and at NYC.rb April 10, 2018.
Resources
For those interested to learn more about webpack, here are some additional resources I've found helpful in my own learning.
Tutorials
Videos
- Frontend Center: webpack from First Principles
- Core Concepts
- Understanding webpack
- Webpack: It's Not Magic
- CSS Tricks: Let's talk about webpack
- What is webpack How does it work?
- Everything is a Plugin, Mastering webpack
- Advanced Concepts
- Code-splitting with webpack: Totally Tooling Tips
Sprockets to webpack
- https://rossta.net/blog/from-sprockets-to-webpack.html
- https://brigade.engineering/setting-up-webpack-with-rails-c62aea149679
- https://medium.com/@chrismnicola/leaving-sprockets-for-webpack-ccf7c6993ffa
- http://clarkdave.net/2015/01/how-to-use-webpack-with-rails/
- https://www.codementor.io/help/rails-with-webpack-not-for-everyone-feucqq83z
Improving build performance
- https://slack.engineering/keep-webpack-fast-a-field-guide-for-better-build-performance-f56a5995e8f1
- https://medium.lucaskatayama.com/reducing-bundle-js-size-from-webpack-8a9c3adbdad4
ES6 Modules
- http://2ality.com/2015/07/es6-module-exports.html
- https://auth0.com/blog/javascript-module-systems-showdown/ (older)
UMD
- http://bob.yexley.net/umd-javascript-that-runs-anywhere/
- https://www.davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/