How to replace rails asset pipeline with webpack?
25
-
Upload
tomasz-bak -
Category
Technology
-
view
530 -
download
1
Transcript of How to replace rails asset pipeline with webpack?
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/`;
}
npm start / npm run build:dev
npm run build:prod
html-webpack-pluginfrontend/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 Examplehttps://github.com/tb/rails-webpack-example
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.jsconst 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.jsconfig = { 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"
},
Rails Webpack Examplehttps://github.com/tb/rails-webpack-example
Node Version Manager - Simple bash script to manage multiple node.js versionshttps://github.com/creationix/nvm
.nvmrc
4.4
Node Version Manager - Simple bash script to manage multiple node.js versionshttps://github.com/creationix/nvm
.nvmrc
4.4
$ node -v
v0.10.38
MacOS X default,many npm packages won’t work
Node Version Manager - Simple bash script to manage multiple node.js versionshttps://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
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",
npm-check-updates
