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 with Hot Module Replacement)
● runs any JavaScript “variant”: ES6, ES7, TypeScript etc.
● runs tasks like: autoprefixer, eslint/tslint, SVG icons
concatenation etc.

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>

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/`;
}

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>

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.config.js
● webpack.config.base.js + webpack.config.js +
webpack.config.[env].js

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';

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/,
},
// ...
};

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/`;
}

if (isProd) {
config.output.filename = '[name]-[hash].js';
config.plugins = config.plugins.concat([
new webpack.optimize.UglifyJsPlugin({
compressor: { warnings: false },
sourceMap: false
}),
]);
}

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
});
}

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,
}),
]);
}

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"
},

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

.nvmrc
4.4
$ node -v
v0.10.38
MacOS X default,
many npm packages won’t work

.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

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
"dependencies": {
"autoprefixer": "^6.3.2",
"babel": "~6.5.0",
"autoprefixer": "6.3.7",
"babel": "6.5.2",

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Mehr von Tomasz Bak

Mehr von Tomasz Bak (18)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)