How to replace rails asset pipeline with webpack?
-
Upload
tomasz-bak -
Category
Technology
-
view
530 -
download
1
Transcript of How to replace rails asset pipeline with webpack?
![Page 2: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/2.jpg)
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.
![Page 3: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/3.jpg)
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>
![Page 4: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/4.jpg)
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/`;
}
![Page 5: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/5.jpg)
npm start / npm run build:dev
![Page 6: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/6.jpg)
npm run build:prod
![Page 7: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/7.jpg)
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>
![Page 8: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/8.jpg)
Rails Webpack Examplehttps://github.com/tb/rails-webpack-example
![Page 10: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/10.jpg)
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
![Page 11: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/11.jpg)
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';
![Page 12: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/12.jpg)
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/, }, // ...};
![Page 13: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/13.jpg)
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/`;
}
![Page 14: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/14.jpg)
if (isProd) {
config.output.filename = '[name]-[hash].js';
config.plugins = config.plugins.concat([
new webpack.optimize.UglifyJsPlugin({
compressor: { warnings: false },
sourceMap: false
}),
]);
}
![Page 15: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/15.jpg)
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
});
}
![Page 16: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/16.jpg)
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,
}),
]);
}
![Page 17: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/17.jpg)
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"
},
![Page 18: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/18.jpg)
Rails Webpack Examplehttps://github.com/tb/rails-webpack-example
![Page 20: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/20.jpg)
Node Version Manager - Simple bash script to manage multiple node.js versionshttps://github.com/creationix/nvm
.nvmrc
4.4
![Page 21: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/21.jpg)
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
![Page 22: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/22.jpg)
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
![Page 24: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/24.jpg)
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",
![Page 25: How to replace rails asset pipeline with webpack?](https://reader034.fdocuments.us/reader034/viewer/2022042618/589e5e021a28ab16348b5e23/html5/thumbnails/25.jpg)
npm-check-updates