Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How to replace Rails Asset
Pipeline with Webpack?
Tomasz Bąk
t.bak@selleo.com
Why replacing Rails Asset Pipeline with Webpack?
● fast rebuilds (rebuild is done in background, page can be
live updated ...
gem 'webpack-rails'
layouts/application.html.erb
<html>
<head>
<title>Rails Webpack</title>
</head>
<body>
<div id="app"><...
gem 'webpack-rails'
frontend/webpack.config.js
if (isDev) {
config.devtool = 'cheap-module-eval-source-map';
config.devSer...
npm start / npm run build:dev
npm run build:prod
html-webpack-plugin
frontend/src/index.html → public/index.html
<html>
<head>
<title>Webpack</title>
</head>
<body>
<div i...
Rails Webpack Example
https://github.com/tb/rails-webpack-example
How to structure
webpack.config.js?
Tomasz Bąk
t.bak@selleo.com
Webpack config requires per env configurations
Possible approaches:
● webpack.config.js
● webpack.config.base.js + webpack...
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const autoprefixer = require('autopref...
webpack.config.js
config = {
context: __dirname,
entry: {
vendor: './src/vendor.js',
styles: './styles/main.scss',
app: '....
if (isDev) {
config.devtool = 'cheap-module-eval-source-map';
config.devServer = {
port: 3808,
headers: { 'Access-Control-...
if (isProd) {
config.output.filename = '[name]-[hash].js';
config.plugins = config.plugins.concat([
new webpack.optimize.U...
if (isTest) {
config.devtool = 'inline-source-map';
// http://airbnb.io/enzyme/docs/guides/webpack.html
config.externals =...
if (!isTest) {
config.plugins = config.plugins.concat([
new webpack.optimize.DedupePlugin(),
new webpack.optimize.Occurenc...
Build “scripts” in package.json
"scripts": {
"clean": "rm -rf ../public/webpack",
"start": "npm run build:dev",
"build:dev...
Rails Webpack Example
https://github.com/tb/rails-webpack-example
What is NPM equivalent of
".ruby-version"?
Tomasz Bąk
t.bak@selleo.com
Node Version Manager - Simple bash script to manage multiple node.js versions
https://github.com/creationix/nvm
.nvmrc
4.4
Node Version Manager - Simple bash script to manage multiple node.js versions
https://github.com/creationix/nvm
.nvmrc
4.4...
Node Version Manager - Simple bash script to manage multiple node.js versions
https://github.com/creationix/nvm
.nvmrc
4.4...
What is NPM equivalent of
"Gamefile.lock"?
Tomasz Bąk
t.bak@selleo.com
https://devcenter.heroku.com/articles/node-best-practices#use-a-smart-npmrc
.npmrc
save=true
save-exact=true
package.json
...
npm-check-updates
Upcoming SlideShare
Loading in …5
×

How to replace rails asset pipeline with webpack?

1,257 views

Published on

How to replace rails asset pipeline with webpack?
How to structure webpack.config.js?
What is NPM equivalent of ".ruby-version"?
What is NPM equivalent of "Gamefile.lock"?

Published in: Technology
  • Be the first to comment

How to replace rails asset pipeline with webpack?

  1. 1. How to replace Rails Asset Pipeline with Webpack? Tomasz Bąk t.bak@selleo.com
  2. 2. Why replacing Rails Asset Pipeline with Webpack? ● fast rebuilds (rebuild is done in background, page can be live updated with Hot Module Replacement) ● runs any JavaScript “variant”: ES6, ES7, TypeScript etc. ● runs tasks like: autoprefixer, eslint/tslint, SVG icons concatenation etc.
  3. 3. gem 'webpack-rails' layouts/application.html.erb <html> <head> <title>Rails Webpack</title> </head> <body> <div id="app"></div> <%= javascript_include_tag *webpack_asset_paths('vendor') %> <%= javascript_include_tag *webpack_asset_paths('styles') %> <%= javascript_include_tag *webpack_asset_paths('app') %> </body> </html>
  4. 4. gem 'webpack-rails' frontend/webpack.config.js if (isDev) { config.devtool = 'cheap-module-eval-source-map'; config.devServer = { port: 3808, headers: { 'Access-Control-Allow-Origin': '*' }, stats: 'minimal' }; config.output.publicPath = `//localhost:3808/webpack/`; }
  5. 5. npm start / npm run build:dev
  6. 6. npm run build:prod
  7. 7. html-webpack-plugin frontend/src/index.html → public/index.html <html> <head> <title>Webpack</title> </head> <body> <div id="app"></div> {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %} <script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script> {% } %} </body> </html>
  8. 8. Rails Webpack Example https://github.com/tb/rails-webpack-example
  9. 9. How to structure webpack.config.js? Tomasz Bąk t.bak@selleo.com
  10. 10. Webpack config requires per env configurations Possible approaches: ● webpack.config.js ● webpack.config.base.js + webpack.config.js ● webpack.config.base.js + webpack.config.js + webpack.config.[env].js
  11. 11. webpack.config.js const webpack = require('webpack'); const path = require('path'); const autoprefixer = require('autoprefixer'); const StatsPlugin = require('stats-webpack-plugin'); const nodeEnv = process.env.NODE_ENV || process.env.RAILS_ENV || 'development'; const isTest = nodeEnv == 'test'; const isDev = nodeEnv == 'development'; const isProd = nodeEnv == 'production' || nodeEnv == 'staging';
  12. 12. webpack.config.js config = { context: __dirname, entry: { vendor: './src/vendor.js', styles: './styles/main.scss', app: './src/bootstrap.jsx' }, output: { filename: '[name].js', path: '../public/webpack', publicPath: '/webpack/', }, module: { preLoaders: [ { test: /.jsx?$/, loader: 'eslint?parser=babel-eslint', exclude: /node_modules/ } ], Loaders: [ { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, }, // ... };
  13. 13. if (isDev) { config.devtool = 'cheap-module-eval-source-map'; config.devServer = { port: 3808, headers: { 'Access-Control-Allow-Origin': '*' }, stats: 'minimal' }; config.output.publicPath = `//localhost:3808/webpack/`; }
  14. 14. if (isProd) { config.output.filename = '[name]-[hash].js'; config.plugins = config.plugins.concat([ new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false }, sourceMap: false }), ]); }
  15. 15. if (isTest) { config.devtool = 'inline-source-map'; // http://airbnb.io/enzyme/docs/guides/webpack.html config.externals = Object.assign({}, config.externals, { 'react/addons': true, 'react/lib/ExecutionEnvironment': true, 'react/lib/ReactContext': true }); }
  16. 16. if (!isTest) { config.plugins = config.plugins.concat([ new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: `vendor${isProd ? '-[hash]' : ''}.js`, minChunks: Infinity, }), ]); }
  17. 17. Build “scripts” in package.json "scripts": { "clean": "rm -rf ../public/webpack", "start": "npm run build:dev", "build:dev": "NODE_ENV=development webpack-dev-server --hot --inline", "build:prod": "npm run clean && NODE_ENV=production webpack", "test": "NODE_ENV=test karma start", "test:ci": "NODE_ENV=test karma start --singleRun" },
  18. 18. Rails Webpack Example https://github.com/tb/rails-webpack-example
  19. 19. What is NPM equivalent of ".ruby-version"? Tomasz Bąk t.bak@selleo.com
  20. 20. Node Version Manager - Simple bash script to manage multiple node.js versions https://github.com/creationix/nvm .nvmrc 4.4
  21. 21. Node Version Manager - Simple bash script to manage multiple node.js versions https://github.com/creationix/nvm .nvmrc 4.4 $ node -v v0.10.38 MacOS X default, many npm packages won’t work
  22. 22. Node Version Manager - Simple bash script to manage multiple node.js versions https://github.com/creationix/nvm .nvmrc 4.4 $ node -v v0.10.38 $ cd frontend Found '.nvmrc' with version <4.4> Now using node v4.4.3 (npm v3.10.2) $ node -v v4.4.3 MacOS X default, many npm packages won’t work
  23. 23. What is NPM equivalent of "Gamefile.lock"? Tomasz Bąk t.bak@selleo.com
  24. 24. https://devcenter.heroku.com/articles/node-best-practices#use-a-smart-npmrc .npmrc save=true save-exact=true package.json "dependencies": { "autoprefixer": "^6.3.2", "babel": "~6.5.0", "autoprefixer": "6.3.7", "babel": "6.5.2",
  25. 25. npm-check-updates

×