update webpack configs

Gemfile

@@ -3,7 +3,7 @@
 source "https://rubygems.org"
 ruby "2.7.1"
 
-gem "react_on_rails", "12.0.0-beta.1"
+gem "react_on_rails", "12.0.0-beta.2"
 gem "webpacker"
 
 # Bundle edge Rails instead: gem "rails", github: "rails/rails"

Gemfile.lock

@@ -209,7 +209,7 @@ GEM
  rb-inotify (0.10.1)
  ffi (~> 1.0)
  rdoc (6.2.1)
- react_on_rails (12.0.0.pre.beta.1)
+ react_on_rails (12.0.0.pre.beta.2)
  addressable
  connection_pool
  execjs (~> 2.5)
@@ -355,7 +355,7 @@ DEPENDENCIES
  rails-html-sanitizer
  rails_best_practices
  rainbow
- react_on_rails (= 12.0.0.pre.beta.1)
+ react_on_rails (= 12.0.0.pre.beta.2)
  redis (= 3.3.3)
  rspec-rails (= 3.7.2)
  rubocop

Procfile.static

@@ -1,8 +1,2 @@
 # Run Rails without hot reloading (static assets).
 rails: rails s -b 0.0.0.0
-
-# Build client assets, watching for changes.
-rails-client-assets: rm -rf public/webpack/development || true && bundle exec rake react_on_rails:locale && yarn run build:dev:client
-
-# Build server assets, watching for changes. Remove if not server rendering.
-rails-server-assets: yarn run build:dev:server

app/javascript/packs/application.js

@@ -0,0 +1,18 @@
+/* eslint no-console:0 */
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+
+// Uncomment to copy all static images under ../images to the output folder and reference
+// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
+// or the `imagePath` JavaScript helper below.
+//
+// const images = require.context('../images', true)
+// const imagePath = (name) => images(name, true)
+
+console.log('Hello World from Webpacker')

babel.config.js

@@ -0,0 +1,72 @@
+module.exports = function(api) {
+ var validEnv = ['development', 'test', 'production']
+ var currentEnv = api.env()
+ var isDevelopmentEnv = api.env('development')
+ var isProductionEnv = api.env('production')
+ var isTestEnv = api.env('test')
+
+ if (!validEnv.includes(currentEnv)) {
+ throw new Error(
+ 'Please specify a valid `NODE_ENV` or ' +
+ '`BABEL_ENV` environment variables. Valid values are "development", ' +
+ '"test", and "production". Instead, received: ' +
+ JSON.stringify(currentEnv) +
+ '.'
+ )
+ }
+
+ return {
+ presets: [
+ isTestEnv && [
+ '@babel/preset-env',
+ {
+ targets: {
+ node: 'current'
+ }
+ }
+ ],
+ (isProductionEnv || isDevelopmentEnv) && [
+ '@babel/preset-env',
+ {
+ forceAllTransforms: true,
+ useBuiltIns: 'entry',
+ corejs: 3,
+ modules: false,
+ exclude: ['transform-typeof-symbol']
+ }
+ ]
+ ].filter(Boolean),
+ plugins: [
+ 'babel-plugin-macros',
+ '@babel/plugin-syntax-dynamic-import',
+ isTestEnv && 'babel-plugin-dynamic-import-node',
+ '@babel/plugin-transform-destructuring',
+ [
+ '@babel/plugin-proposal-class-properties',
+ {
+ loose: true
+ }
+ ],
+ [
+ '@babel/plugin-proposal-object-rest-spread',
+ {
+ useBuiltIns: true
+ }
+ ],
+ [
+ '@babel/plugin-transform-runtime',
+ {
+ helpers: false,
+ regenerator: true,
+ corejs: false
+ }
+ ],
+ [
+ '@babel/plugin-transform-regenerator',
+ {
+ async: false
+ }
+ ]
+ ].filter(Boolean)
+ }
+}

bin/webpack

@@ -0,0 +1,18 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"] ||= "development"
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+ Pathname.new(__FILE__).realpath)
+
+require "bundler/setup"
+
+require "webpacker"
+require "webpacker/webpack_runner"
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+ Webpacker::WebpackRunner.run(ARGV)
+end

bin/webpack-dev-server

@@ -0,0 +1,18 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"] ||= "development"
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+ Pathname.new(__FILE__).realpath)
+
+require "bundler/setup"
+
+require "webpacker"
+require "webpacker/dev_server_runner"
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+ Webpacker::DevServerRunner.run(ARGV)
+end

client/alias.js

@@ -0,0 +1,9 @@
+const { resolve } = require('path');
+
+module.exports = {
+ resolve: {
+ alias: {
+ Assets: resolve(__dirname, '..', '..', 'client', 'app', 'assets'),
+ },
+ },
+};

client/development.js

@@ -0,0 +1,33 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+
+// We need to compile both our development JS (for serving to the client) and our server JS
+// (for SSR of React components). This is easy enough as we can export arrays of webpack configs.
+const clientEnvironment = require('./webpack.client.rails.build.config');
+const serverConfig = require('./webpack.server.rails.build.config');
+
+const optimization = {
+ splitChunks: {
+ chunks: 'async',
+ cacheGroups: {
+ vendor: {
+ chunks: 'async',
+ name: 'vendor',
+ test: 'vendor',
+ enforce: true,
+ },
+ },
+ },
+};
+
+clientEnvironment.splitChunks((config) => Object.assign({}, config, { optimization: optimization }));
+
+const clientConfig = clientEnvironment.toWebpackConfig();
+
+// For HMR, we need to separate the the client and server webpack configurations
+if (process.env.WEBPACK_DEV_SERVER) {
+ module.exports = clientConfig;
+} else if (process.env.SERVER_BUNDLE_ONLY) {
+ module.exports = serverConfig;
+} else {
+ module.exports = [clientConfig, serverConfig];
+}

client/environment.js

@@ -0,0 +1,60 @@
+const { environment } = require('@rails/webpacker');
+
+const sassResources = ['./client/app/assets/styles/app-variables.scss'];
+const aliasConfig = require('./alias.js');
+const rules = environment.loaders;
+const fileLoader = rules.get('file');
+const cssLoader = rules.get('css');
+const sassLoader = rules.get('sass');
+const babelLoader = rules.get('babel');
+const ManifestPlugin = environment.plugins.get('Manifest');
+const urlFileSizeCutover = 1000; // below 10k, inline, small 1K is to test file loader
+
+// rules
+sassLoader.use.push({
+ loader: 'sass-resources-loader',
+ options: {
+ resources: sassResources,
+ },
+});
+
+//adding urlLoader
+const urlLoader = {
+ test: /\.(jpe?g|png|gif|ico|woff)$/,
+ use: {
+ loader: 'url-loader',
+ options: {
+ limit: urlFileSizeCutover,
+ // NO leading slash
+ name: 'images/[name]-[hash].[ext]',
+ },
+ },
+};
+environment.loaders.insert('url', urlLoader, { before: 'file' });
+
+// changing order of babelLoader
+environment.loaders.insert('babel', babelLoader, { before: 'css' });
+
+// add aliases to config
+environment.config.merge(aliasConfig);
+
+// modifying modules in css and sass to true,
+cssLoader.use[1].options.modules = true;
+sassLoader.use[1].options.modules = true;
+
+//changing fileLoader to use proper values
+fileLoader.test = /\.(ttf|eot|svg)$/;
+fileLoader.use[0].options = { name: 'images/[name]-[hash].[ext]' };
+
+// removing extra rules added by webpacker
+rules.delete('nodeModules');
+rules.delete('moduleCss');
+rules.delete('moduleSass');
+
+// plugins
+// adding definePlugin
+
+// manipulating manifestPlugin
+ManifestPlugin.options.writeToFileEmit = true;
+
+module.exports = environment;

client/package.json

@@ -99,6 +99,7 @@
  "webpack-merge": "^4.1.1"
  },
  "devDependencies": {
+ "@pmmmwh/react-refresh-webpack-plugin": "0.4.0-beta.4",
  "babel-eslint": "^8.0.2",
  "babel-jest": "^23.4.2",
  "body-parser": "^1.18.2",

client/production.js

@@ -0,0 +1,26 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+
+// We need to compile both our development JS (for serving to the client) and our server JS
+// (for SSR of React components). This is easy enough as we can export arrays of webpack configs.
+const clientEnvironment = require('./webpack.client.rails.build.config');
+const serverConfig = require('./webpack.server.rails.build.config');
+
+const optimization = {
+ splitChunks: {
+ chunks: 'async',
+ cacheGroups: {
+ vendor: {
+ chunks: 'async',
+ name: 'vendor',
+ test: 'vendor',
+ enforce: true,
+ },
+ },
+ },
+};
+
+clientEnvironment.splitChunks((config) => Object.assign({}, config, { optimization: optimization }));
+
+const clientConfig = clientEnvironment.toWebpackConfig();
+
+module.exports = [clientConfig, serverConfig];

client/test.js

@@ -0,0 +1,8 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'test';
+
+const clientEnvironment = require('./client');
+const serverConfig = require('./server');
+
+const clientConfig = clientEnvironment.toWebpackConfig();
+
+module.exports = [clientConfig, serverConfig];