Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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
Próxima SlideShare
Cargando en…5
×

How to replace rails asset pipeline with webpack?

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"?

  • Inicia sesión para ver los comentarios

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

×