Rails 5.1 & Webpacker

Presented at the Christchurch Ruby Meetup, 21st September 2017.

An introduction to Webpacker (https://github.com/rails/webpacker) and how it uses Webpack (https://webpack.js.org) to deliver a modern alternative (or complement) to the asset pipeline.

Transcript

1. Mark Haylock https://github.com/mhaylock
2. = WEBPACKER + = PROFIT?
3. WHAT IS RAILS?
4. WHAT IS RAILS? • A young upstart server-side web application framework, written in Ruby. • A wholesome server-side feast of technology, best spiced with small “sprinkles” of JavaScript? mature
5. WHAT IS RAILS?
6. • A young upstart server-side web application framework, written in Ruby. • A wholesome server-side feast of technology, best spiced with small “sprinkles” of JavaScript? • The perfect server-side compliment for a JavaScript SPA (Single Page Application)? WHAT IS RAILS? mature
7. WHAT IS WEBPACK? https://webpack.js.org/concepts/
8. • “A module builder for modern JavaScript applications” • Constructs a dependency graph of modules an application needs and packages those dependencies into one or more bundles. • Built around Four Core Concepts: entry, output, loaders, plugins. WHAT IS WEBPACK? https://webpack.js.org/concepts/
9. • An entry point is a module file that acts as the starting point for the dependency graph. ENTRY & OUTPUT https://webpack.js.org/concepts/
10. • Webpack will then produce one or more bundled output files. ENTRY & OUTPUT .js .css .jpg .png https://webpack.js.org/concepts/
11. • Webpack will treat all files (.js, .css, .html, .scss, .jpg e.t.c.) as a potentially valid module. • However, by itself it only understands JavaScript. • Loaders understand these other file formats and transform them into JavaScript modules that Webpack can understand. LOADERS & PLUGINS https://webpack.js.org/concepts/
12. • Loaders execute transforms on a per-file basis. • Plugins can perform actions and apply custom functionality to “compilations” or “chunks” of bundled modules. • There many loaders and plugins available. Webpack itself comes with many built-in plugins. LOADERS & PLUGINS https://webpack.js.org/concepts/
13. LOADERS & PLUGINS https://webpack.js.org/concepts/ More on Loaders and Plugins later…
14. WHAT IS WEBPACKER?
15. WHAT IS WEBPACKER?
16. WHAT IS WEBPACKER? • A gem that provides integration between Rails and Webpack. • Version 1.0 support shipped with Rails 5.1. Now up to version 3.0.1, and has evolved significantly since 1.0. • Billed as a complement to the asset pipeline, rather than a replacement. https://github.com/rails/webpacker
17. WHAT IS WEBPACKER?
18. ADDING WEBPACKER • Add webpack to your app using the provided generators: // Creating a new Rails app with webpacker: $ rails new example-app --webpack // There is additional support for setting up popular frameworks: $ rails new example-app --webpack=react $ rails new example-app --webpack=angular $ rails new example-app --webpack=vue $ rails new example-app --webpack=elm // Adding to an existing app: $ bundle exec rails webpacker:install $ bundle exec rails webpacker:install:[react, angular, vue and elm]
19. Files added by passing --webpack to rails new: Each file in app/javascript/packs is an entry point for webpack. A couple of executables are provided. config/webpack contains webpack configuration information (specifying loaders, plugins e.t.c) webpacker.yml is for webpacker specific configuration .babelrc contains configuration for Babel (JS transpiler) .postcssrc.yml contains configuration for PostCSS (a CSS post processor) Yarn creates a yarn.lock from package.json.
20. Additional changes from passing --webpack=react to rails new: A barebones React application is provided in app/javascript/packs/hello_react.jsx. Additional dependencies are added to package.json.
21. CONFIGURING WEBPACK An example of how much configuration is possible: https://webpack.js.org/configuration/
22. An example of how much configuration is possible: https://webpack.js.org/configuration/
23. CONFIGURING WEBPACK const { environment } = require('@rails/webpacker') module.exports = environment config/webpack/environment.js: const environment = require('./environment') module.exports = environment.toWebpackConfig() config/webpack/development.js: config/webpack/production.js: config/webpack/test.js: What webpacker provides in it’s configuration files by default:
24. Where did all the configuration go?
25. CONFIGURING WEBPACK • Webpacker includes an NPM module that hides away it’s default webpack configuration: • Module: https://www.npmjs.com/package/@rails/ webpacker • Source: https://github.com/rails/webpacker/tree/ master/package
26. Loader Name(s) Description babel-loader Transpiles ES2015+ JavaScript coffee-loader Transpiles CoffeeScript elm-webpack-loader, elm-hot-loader Transpiles Elm rails-erb-loader Compiles and executes ERB files (!!) file-loader Bundles static files (images, font files) and outputs to the bundle with digested filenames style-loader, css-loader, postcss-loader, sass-loader Bundles and transpires SASS/SCSS/CSS ts-loader Transpiles and type checks TypeScript vue-loader Supports transpiling *.vue component files for Vue.js Default webpack loaders for webpacker:
27. Plugin Name Environment Description EnvironmentPlugin all Captures ENV vars, exposing them under process.env.ENV_NAME ExtractTextPlugin all Extracts all compiled CSS into a separate .css file ManifestPlugin all Produces a manifest of output files - used by webpacker to figure out if files have changed. HotModuleReplacementPlugin development (HMR) Part of allowing modules to update in realtime without a page reload. NamedModulesPlugin development (HMR) Used in HMR to allow updated module names to be listed. ModuleConcatenationPlugin production Simplifies the way modules are bundled together, for faster execution performance. UglifyJSPlugin production Uses UglifyJS to minify JavaScript. CompressionPlugin production Produces compressed (e.g. gzipped) versions of assets. Default webpack plugins for webpacker:
28. DEMO
29. DEPLOYMENT • Heroku now automatically installs Yarn and Node if you deploy a Rails app with Webpacker. • A new rake take webpacker:compile is run automatically along with assets:precompile during deploy.
30. FINALLY… • Excellent documentation can be found at https:// github.com/rails/webpacker/tree/master/docs • Questions?