webpack.md

Webpack integration

Run this to set your project up with a simple Webpack config.

./bin/rails generate npm_pipeline:webpack

The default config

See: sample webpack.config.js

This adds a Webpack configuration with sensible features for typical Rails apps.

JavaScript: It will transpile ES2015 to compatible code using Babel. You'll also be able to use npm modules and require(), thanks to Webpack.

• babel-loader for evergreen .js support

CSS: It ships with Sass support along with some basic PostCSS plugins. You'll also be able to use image-url() and other Rails magic so you can take advantage of Rails's asset fingerprinting.

• sass-loader for Sass support
• postcss-loader with:
  • autoprefixer
  • postcss-asset-url-rails for image-url() support
• extract-text-webpack-plugin for .css file support

Manual setup

If you don't want to use the generator, here's what it does.

package.json

Set up webpack (et al) and some basic Webpack plugins.

npm init --yes
npm install --save-dev --save-exact webpack style-loader css-loader extract-text-webpack-plugin

You also need to set the start and build scripts.

/* package.json */
"scripts": {
  "start": "webpack --progress --colors --watch",
  "build": "webpack --progress --colors"
}

See: sample package.json

webpack.config.js

Set it up to watch source files in app/webpack, then put built files into vendor/assets.

See: sample webpack.config.js, simplified webpack.config.js

.gitignore

Set it up to ignore Webpack's built files.

/node_modules
/vendor/assets/stylesheets/webpack
/vendor/assets/javascripts/webpack

app/assets/stylesheets/application.css

Set it up to include Webpack's built files. This will load from vendor/assets/stylesheets/webpack/app.css, as built by webpack.

/*
 *= require webpack/app
 */

app/assets/javascripts/application.js

Set it up to include Webpack's built files. This will load from vendor/assets/javascripts/webpack/app.js, as built by webpack.

//= require webpack/app

app/webpack/

Put your source files into app/webpack. For instance:

• app/webpack/app.js

  alert('it works!')

Be sure to point the proper entry points in the Webpack config.