Skip to content

Commit 9c24b98

Browse files
kaizencodesjustin808
kaizencodes
authored and
justin808
committed
use webpacker_lite
1 parent ec97449 commit 9c24b98

18 files changed

+208
-119
lines changed

‎.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ vendor/ruby
2727
.ruby-gemset
2828

2929
# Generated js bundles
30-
/app/assets/webpack/
30+
/public/webpack/
3131

3232
# Rubymine/IntelliJ
3333
.idea

‎Gemfile

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@ gem "rails-html-sanitizer"
4040

4141
gem "react_on_rails", "7.0.0"
4242

43+
gem "webpacker_lite", "0.0.4"
44+
4345
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
4446
# mini_racer is probably faster than therubyracer
4547
gem "mini_racer"

‎Gemfile.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,10 @@ GEM
288288
activemodel (>= 5.0)
289289
bindex (>= 0.4.0)
290290
railties (>= 5.0)
291+
webpacker_lite (0.0.4)
292+
activesupport (>= 4.2)
293+
multi_json (~> 1.2)
294+
railties (>= 4.2)
291295
websocket (1.2.4)
292296
websocket-driver (0.6.5)
293297
websocket-extensions (>= 0.1.0)
@@ -344,6 +348,7 @@ DEPENDENCIES
344348
spring-commands-rspec
345349
uglifier
346350
web-console
351+
webpacker_lite (= 0.0.4)
347352

348353
RUBY VERSION
349354
ruby 2.4.1p111

‎Procfile.hot

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
rails: REACT_ON_RAILS_ENV=HOT rails s -b 0.0.0.0
77

88
# Run the hot reload server for client development
9-
hot-assets: sh -c 'rm app/assets/webpack/* || true && bundle exec rake react_on_rails:locale && HOT_RAILS_PORT=3500 yarn run hot-assets'
9+
hot-assets: sh -c 'rm public/webpack/* || true && bundle exec rake react_on_rails:locale && HOT_RAILS_PORT=3500 yarn run hot-assets'
1010

1111
# Keep the JS fresh for server rendering. Remove if not server rendering
1212
rails-server-assets: sh -c 'yarn run build:dev:server'

‎Procfile.static

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
rails: REACT_ON_RAILS_ENV= rails s -b 0.0.0.0
33

44
# Build client assets, watching for changes.
5-
rails-client-assets: rm app/assets/webpack/* || true && bundle exec rake react_on_rails:locale && yarn run build:dev:client
5+
rails-client-assets: rm public/webpack/* || true && bundle exec rake react_on_rails:locale && yarn run build:dev:client
66

77
# Build server assets, watching for changes. Remove if not server rendering.
88
rails-server-assets: yarn run build:dev:server

‎app/views/layouts/application.html.erb

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,14 @@
33
<head>
44
<title>RailsReactTutorial</title>
55

6-
<%= env_stylesheet_link_tag(static: 'application_static',
7-
hot: 'application_non_webpack',
8-
media: 'all',
9-
'data-turbolinks-track' => "reload") %>
6+
<%= javascript_pack_tag 'vendor' %>
7+
<%= javascript_pack_tag 'app' %>
108

119
<!-- These do not use turbolinks, so no data-turbolinks-track -->
1210
<!-- This is to load the hot assets. -->
13-
<%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js',
14-
'http://localhost:3500/app-bundle.js']) %>
1511

16-
<!-- These do use turbolinks -->
17-
<%= env_javascript_include_tag(static: 'application_static',
18-
hot: 'application_non_webpack',
19-
'data-turbolinks-track' => "reload") %>
12+
13+
2014
<%= csrf_meta_tags %>
2115
</head>
2216
<body>

‎client/.babelrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"presets": ["es2015", "stage-0", "react"]
2+
"presets": ["es2015", "stage-2", "react"]
33
}

‎client/package.json

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,12 @@
3232
"build:production:client": "NODE_ENV=production webpack --config webpack.client.rails.build.config.js",
3333
"build:production:server": "NODE_ENV=production webpack --config webpack.server.rails.build.config.js",
3434
"build:client": "webpack --config webpack.client.rails.build.config.js",
35-
"build:dev:client": "webpack -w --config webpack.client.rails.build.config.js",
36-
"build:dev:server": "webpack -w --config webpack.server.rails.build.config.js",
35+
"build:dev:client": "NODE_ENV=development webpack -w --config webpack.client.rails.build.config.js",
36+
"build:dev:server": "NODE_ENV=development webpack -w --config webpack.server.rails.build.config.js",
3737
"build:server": "webpack --config webpack.server.rails.build.config.js",
38-
"build:test": "yarn run build:client && yarn run build:server",
39-
"build:production": "yarn run build:production:client && yarn run build:production:server",
40-
"hot-assets": "babel-node server-rails-hot.js",
38+
"build:test": "NODE_ENV=test yarn run build:client && NODE_ENV=test yarn run build:server",
39+
"build:production": "NODE_ENV=production yarn run build:production:client && yarn run build:production:server",
40+
"hot-assets": "NODE_ENV=development babel-node server-rails-hot.js",
4141
"lint": "eslint --ext .js,.jsx ."
4242
},
4343
"dependencies": {
@@ -52,20 +52,23 @@
5252
"babel-polyfill": "^6.23.0",
5353
"babel-preset-es2015": "^6.24.1",
5454
"babel-preset-react": "^6.24.1",
55-
"babel-preset-stage-0": "^6.24.1",
55+
"babel-preset-stage-2": "^0.2.0",
5656
"babel-runtime": "^6.23.0",
5757
"bootstrap-loader": "^2.0.0",
5858
"bootstrap-sass": "^3.3.7",
5959
"classnames": "^2.2.5",
60+
"compression-webpack-plugin": "^0.3.2",
6061
"css-loader": "^0.28.0",
6162
"es5-shim": "^4.5.9",
6263
"estraverse": "^4.2.0",
6364
"expose-loader": "^0.7.3",
6465
"extract-text-webpack-plugin": "^2.1.0",
6566
"file-loader": "^0.11.1",
67+
"glob": "^7.1.1",
6668
"immutable": "^3.8.1",
6769
"imports-loader": "^0.7.1",
6870
"intl": "^1.2.5",
71+
"js-yaml": "^3.8.2",
6972
"jquery": "^3.2.1",
7073
"jquery-ujs": "^1.2.2",
7174
"loader-utils": "^1.1.0",
@@ -91,7 +94,8 @@
9194
"style-loader": "^0.16.1",
9295
"turbolinks": "^5.0.0",
9396
"url-loader": "^0.5.8",
94-
"webpack": "^2.3.3"
97+
"webpack": "^2.3.3",
98+
"webpack-manifest-plugin": "^1.1.0"
9599
},
96100
"devDependencies": {
97101
"babel-eslint": "^7.2.1",

‎client/server-rails-hot.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ import WebpackDevServer from 'webpack-dev-server';
55

66
import webpackConfig from './webpack.client.rails.hot.config';
77

8-
const hotRailsPort = process.env.HOT_RAILS_PORT || 3500;
8+
const { devServer: devServerConfig, publicPath } = require('./webpackConfigLoader.js');
99

1010
const compiler = webpack(webpackConfig);
1111

1212
const devServer = new WebpackDevServer(compiler, {
1313
proxy: {
14-
'*': `http://lvh.me:${hotRailsPort}`,
14+
'*': `http://lvh.me:${devServerConfig.port}`,
1515
},
16-
publicPath: webpackConfig.output.publicPath,
16+
publicPath,
1717
hot: true,
1818
inline: true,
1919
historyApiFallback: true,
@@ -29,9 +29,9 @@ const devServer = new WebpackDevServer(compiler, {
2929
},
3030
});
3131

32-
devServer.listen(hotRailsPort, 'localhost', (err) => {
32+
devServer.listen(devServerConfig.port, 'localhost', (err) => {
3333
if (err) console.error(err);
3434
console.log(
35-
`=> 🔥 Webpack development server is running on port ${hotRailsPort}`,
35+
`=> 🔥 Webpack development server is running on port ${devServerConfig.port}`,
3636
);
3737
});

‎client/webpack.client.base.config.js

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,18 @@
33

44
// Common client-side webpack configuration used by webpack.hot.config and webpack.rails.config.
55
const webpack = require('webpack');
6-
const path = require('path');
6+
const { resolve } = require('path');
7+
8+
const ManifestPlugin = require('webpack-manifest-plugin');
9+
const { paths, publicPath } = require('./webpackConfigLoader.js');
710

811
const devBuild = process.env.NODE_ENV !== 'production';
912
const nodeEnv = devBuild ? 'development' : 'production';
1013

1114
module.exports = {
1215

1316
// the project dir
14-
context: __dirname,
17+
context: resolve(__dirname),
1518
entry: {
1619

1720
// See use of 'vendor' in the CommonsChunkPlugin inclusion below.
@@ -45,13 +48,23 @@ module.exports = {
4548
'./app/bundles/comments/startup/clientRegistration',
4649
],
4750
},
51+
52+
output: {
53+
filename: '[name]-bundle.js',
54+
path: resolve('..', paths.output, paths.assets),
55+
pathinfo: true,
56+
},
57+
4858
resolve: {
49-
extensions: ['.js', '.jsx'],
50-
alias: {
51-
libs: path.resolve(__dirname, 'app/libs'),
52-
react: path.resolve(__dirname, 'node_modules/react'),
53-
'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
54-
},
59+
extensions: paths.extensions,
60+
modules: [
61+
paths.source,
62+
paths.node_modules,
63+
],
64+
},
65+
66+
resolveLoader: {
67+
modules: [paths.node_modules],
5568
},
5669

5770
plugins: [
@@ -76,6 +89,11 @@ module.exports = {
7689
minChunks: Infinity,
7790

7891
}),
92+
new ManifestPlugin({
93+
fileName: paths.manifest,
94+
publicPath,
95+
writeToFileEmit: true,
96+
}),
7997
],
8098

8199
module: {
@@ -89,6 +107,8 @@ module.exports = {
89107
use: {
90108
loader: 'url-loader',
91109
options: {
110+
publicPath,
111+
name: '[name]-[hash].[ext]',
92112
limit: 10000,
93113
},
94114
},

‎client/webpack.client.rails.build.config.js

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,12 @@
44
// Run like this:
55
// cd client && yarn run build:client
66
// Note that Foreman (Procfile.dev) has also been configured to take care of this.
7-
8-
const path = require('path');
97
const ExtractTextPlugin = require('extract-text-webpack-plugin');
108

119
const config = require('./webpack.client.base.config');
1210

1311
const devBuild = process.env.NODE_ENV !== 'production';
1412

15-
config.output = {
16-
filename: '[name]-bundle.js',
17-
path: path.join(__dirname, '../app/assets/webpack'),
18-
};
19-
2013
// You can add entry points specific to rails here
2114
config.entry.vendor.unshift(
2215
'jquery-ujs',

‎client/webpack.client.rails.hot.config.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,14 @@
66
// cd client && babel-node server-rails-hot.js
77
// Note that Foreman (Procfile.dev) has also been configured to take care of this.
88

9-
const path = require('path');
9+
const { resolve } = require('path');
1010
const webpack = require('webpack');
1111

1212
const config = require('./webpack.client.base.config');
13-
14-
const hotRailsPort = process.env.HOT_RAILS_PORT || 3500;
13+
const { devServer, paths, publicPath } = require('./webpackConfigLoader.js');
1514

1615
config.entry.app.push(
17-
`webpack-dev-server/client?http://localhost:${hotRailsPort}`,
16+
`webpack-dev-server/client?${devServer.host}:${devServer.port}`,
1817
'webpack/hot/only-dev-server'
1918
);
2019

@@ -26,8 +25,8 @@ config.entry.vendor.push(
2625

2726
config.output = {
2827
filename: '[name]-bundle.js',
29-
path: path.join(__dirname, 'public'),
30-
publicPath: `http://localhost:${hotRailsPort}/`,
28+
path: resolve('..', paths.output, paths.assets),
29+
publicPath,
3130
};
3231

3332
config.module.rules.push(

‎client/webpack.server.rails.build.config.js

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@
44
// Common webpack configuration for server bundle
55

66
const webpack = require('webpack');
7-
const path = require('path');
7+
const { resolve } = require('path');
8+
9+
const ManifestPlugin = require('webpack-manifest-plugin');
10+
const { paths, publicPath, sharedManifest } = require('./webpackConfigLoader.js');
811

912
const devBuild = process.env.NODE_ENV !== 'production';
1013
const nodeEnv = devBuild ? 'development' : 'production';
@@ -19,20 +22,26 @@ module.exports = {
1922
],
2023
output: {
2124
filename: 'server-bundle.js',
22-
path: path.join(__dirname, '../app/assets/webpack'),
25+
path: resolve('..', paths.output, paths.assets),
2326
},
2427
resolve: {
2528
extensions: ['.js', '.jsx'],
2629
alias: {
27-
libs: path.resolve(__dirname, 'app/libs'),
30+
libs: resolve(__dirname, 'app/libs'),
2831
},
2932
},
3033
plugins: [
3134
new webpack.DefinePlugin({
3235
'process.env': {
3336
NODE_ENV: JSON.stringify(nodeEnv),
3437
},
35-
})
38+
}),
39+
new ManifestPlugin({
40+
fileName: paths.manifest,
41+
publicPath,
42+
writeToFileEmit: true,
43+
cache: sharedManifest,
44+
}),
3645
],
3746
module: {
3847
rules: [

‎client/webpackConfigLoader.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/* eslint import/no-dynamic-require: 0 */
2+
const { join, resolve } = require('path');
3+
const { env } = require('process');
4+
const { safeLoad } = require('js-yaml');
5+
const { readFileSync } = require('fs');
6+
7+
const configPath = resolve('..', 'config', 'webpack');
8+
const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV];
9+
const devServer = safeLoad(readFileSync(join(configPath, 'development.server.yml'), 'utf8'))[env.NODE_ENV];
10+
11+
const productionBuild = env.NODE_ENV === 'production';
12+
13+
const publicPath = !productionBuild && devServer.enabled ?
14+
`http://${devServer.host}:${devServer.port}/` : `/${paths.assets}/`;
15+
16+
17+
const manifestPath = resolve('..', paths.output, paths.assets, paths.manifest);
18+
const sharedManifest = require(manifestPath);
19+
20+
module.exports = {
21+
devServer,
22+
env,
23+
paths,
24+
publicPath,
25+
sharedManifest,
26+
};

0 commit comments

Comments
 (0)