Webpack upgrade to Rails 5 default

CDCgov · Sep 26, 2017 · bc79f24 · bc79f24
1 parent f24c5c5
commit bc79f24
Show file tree

Hide file tree

Showing 30 changed files with 7,136 additions and 142 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,24 @@
 {
-  "presets": ["es2015", "react"]
+  "presets": ["es2015", "react",
+    [
+      "env",
+      {
+        "modules": false,
+        "targets": {
+          "browsers": "> 1%",
+          "uglify": true
+        },
+        "useBuiltIns": true
+      }
+    ],
+  ],
+  "plugins": [
+    "syntax-dynamic-import",
+    [
+      "transform-class-properties",
+      {
+        "spec": true
+      }
+    ]
+  ]
 }
diff --git a/.gitignore b/.gitignore
@@ -42,3 +42,5 @@ reports
 config/settings.local.yml
 config/settings/*.local.yml
 config/environments/*.local.yml
+/public/packs
+/node_modules
diff --git a/.postcssrc.yml b/.postcssrc.yml
@@ -0,0 +1,4 @@
+plugins:
+  postcss-smart-import: {}
+  precss: {}
+  autoprefixer: {}
diff --git a/Gemfile b/Gemfile
@@ -8,7 +8,7 @@ gem 'pg'
 # Use Puma as the app server
 gem 'puma', '~> 3.0'
 
-gem 'webpack-rails'
+gem 'webpacker'
 gem 'olive_branch'
 
 gem 'active_model_serializers', '~> 0.10.0'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -376,8 +376,10 @@ GEM
       activesupport
       httpclient (>= 2.4)
       multi_json
-    webpack-rails (0.9.11)
-      railties (>= 3.2.0)
+    webpacker (2.0)
+      activesupport (>= 4.2)
+      multi_json (~> 1.2)
+      railties (>= 4.2)
     websocket (1.2.4)
     websocket-driver (0.6.5)
       websocket-extensions (>= 0.1.0)
@@ -440,7 +442,7 @@ DEPENDENCIES
   simplecov
   tzinfo-data
   web-console
-  webpack-rails
+  webpacker
 
 BUNDLED WITH
    1.15.2
diff --git a/Procfile b/Procfile
@@ -1,4 +1,5 @@
 # Run Rails & Webpack concurrently
-# Example file from webpack-rails gem
 rails: bundle exec rails server -b 0.0.0.0
-webpack: ./node_modules/.bin/webpack-dev-server --config config/webpack.config.js --host 0.0.0.0
+webpack: ./bin/webpack-dev-server --host 0.0.0.0
+# If you want to test production mode, use this command because the dev server won't run production configuration
+# webpack: ./bin/webpack --watch --progress --colors
diff --git a/Rakefile b/Rakefile
@@ -23,11 +23,11 @@ end
 
 namespace :javascript do
   task :test do
-    sh('npm test')
+    sh('yarn test')
   end
 
   task :lint do
-    sh('npm run lint')
+    sh('yarn run lint')
   end
 end
 

diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb
@@ -100,4 +100,4 @@
 <script type="application/json" id="question-json">
   <%= raw @questions.to_json %>
 </script>
-<%= javascript_include_tag *webpack_asset_paths('search', extension: 'js') %>
+<%= javascript_pack_tag 'search.js' %>
diff --git a/app/views/landing/index.html.erb b/app/views/landing/index.html.erb
@@ -1,3 +1,3 @@
 <div id="app">
 </div>
-<%= javascript_include_tag *webpack_asset_paths('landing', extension: 'js') %>
+<%= javascript_pack_tag 'landing.js' %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -9,7 +9,7 @@
     <%= csrf_meta_tags %>
     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 
-    <%= javascript_include_tag *webpack_asset_paths('babel-polyfill', extension: 'js') %>
+    <%= javascript_pack_tag 'babel-polyfill' %>
   </head>
 
   <body class="body">

diff --git a/app/views/layouts/landing.html.erb b/app/views/layouts/landing.html.erb
@@ -11,7 +11,8 @@
     <% end %>
     <%= csrf_meta_tags %>
 
-    <%= javascript_include_tag *webpack_asset_paths('babel-polyfill', extension: 'js') %>
+    <%= javascript_pack_tag 'babel-polyfill.js' %>
+    <%= stylesheet_pack_tag 'landing' %>
   </head>
 
   <body class="body">

diff --git a/bin/webpack b/bin/webpack
@@ -0,0 +1,28 @@
+#!/usr/bin/env ruby
+$stdout.sync = true
+
+require "shellwords"
+require "yaml"
+
+ENV["RAILS_ENV"] ||= "development"
+RAILS_ENV = ENV["RAILS_ENV"]
+
+ENV["NODE_ENV"] ||= RAILS_ENV
+NODE_ENV = ENV["NODE_ENV"]
+
+APP_PATH          = File.expand_path("../", __dir__)
+NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
+WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.js")
+
+unless File.exist?(WEBPACK_CONFIG)
+  puts "Webpack configuration not found."
+  puts "Please run bundle exec rails webpacker:install to install webpacker"
+  exit!
+end
+
+newenv  = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
+cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CONFIG] + ARGV
+
+Dir.chdir(APP_PATH) do
+  exec newenv, *cmdline
+end
diff --git a/bin/webpack-dev-server b/bin/webpack-dev-server
@@ -0,0 +1,43 @@
+#!/usr/bin/env ruby
+$stdout.sync = true
+
+require "shellwords"
+require "yaml"
+
+ENV["RAILS_ENV"] ||= "development"
+RAILS_ENV = ENV["RAILS_ENV"]
+
+ENV["NODE_ENV"] ||= RAILS_ENV
+NODE_ENV = ENV["NODE_ENV"]
+
+APP_PATH          = File.expand_path("../", __dir__)
+CONFIG_FILE       = File.join(APP_PATH, "config/webpacker.yml")
+NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
+WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/development.js")
+
+def args(key)
+  index = ARGV.index(key)
+  index ? ARGV[index + 1] : nil
+end
+
+begin
+  dev_server = YAML.load_file(CONFIG_FILE)["development"]["dev_server"]
+
+  DEV_SERVER_HOST = "http#{"s" if args('--https') || dev_server["https"]}://#{args('--host') || dev_server["host"]}:#{args('--port') || dev_server["port"]}"
+
+rescue Errno::ENOENT, NoMethodError
+  puts "Webpack dev_server configuration not found in #{CONFIG_FILE}."
+  puts "Please run bundle exec rails webpacker:install to install webpacker"
+  exit!
+end
+
+newenv = {
+  "NODE_PATH" => NODE_MODULES_PATH.shellescape,
+  "ASSET_HOST" => DEV_SERVER_HOST.shellescape
+}.freeze
+
+cmdline = ["yarn", "run", "webpack-dev-server", "--", "--progress", "--color", "--config", WEBPACK_CONFIG] + ARGV
+
+Dir.chdir(APP_PATH) do
+  exec newenv, *cmdline
+end
diff --git a/config/webpack.config.js b/config/webpack.config.js
diff --git a/config/webpack/configuration.js b/config/webpack/configuration.js
@@ -0,0 +1,41 @@
+// Common configuration for webpacker loaded from config/webpacker.yml
+'use strict';
+
+const { env } = require('process');
+const { safeLoad } = require('js-yaml');
+const { readFileSync } = require('fs');
+const { join, resolve } = require('path');
+
+const configPath = resolve('config', 'webpacker.yml');
+const loadersDir = join(__dirname, 'loaders');
+const settings = safeLoad(readFileSync(configPath), 'utf8')[env.NODE_ENV];
+
+function removeOuterSlashes(string) {
+  return string.replace(/^\/*/, '').replace(/\/*$/, '');
+}
+
+function formatPublicPath(host = '', path = '') {
+  let formattedHost = removeOuterSlashes(host);
+  if (formattedHost && !/^http/i.test(formattedHost)) {
+    formattedHost = `//${formattedHost}`;
+  }
+  const formattedPath = removeOuterSlashes(path);
+  return `${formattedHost}/${formattedPath}/`;
+}
+
+const output = {
+  path: resolve('public', settings.public_output_path),
+  publicPath: formatPublicPath(env.ASSET_HOST, settings.public_output_path)
+};
+
+// Setting this in development.js doesn't work for some reason?
+if (process.env.NODE_ENV !== 'production'){
+  output.publicPath = 'http://' + settings.dev_server.host + ':' + settings.dev_server.port + '/webpack/';
+}
+
+module.exports = {
+  settings,
+  env,
+  loadersDir,
+  output
+};
diff --git a/config/webpack/development.js b/config/webpack/development.js
@@ -0,0 +1,44 @@
+// Note: You must restart bin/webpack-dev-server for changes to take effect
+'use strict';
+
+const merge = require('webpack-merge');
+const sharedConfig = require('./shared.js');
+const { settings, output } = require('./configuration.js');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+
+module.exports = merge(sharedConfig, {
+  entry: {
+    // Sources are expected to live in $app_root/webpack
+    'babel-polyfill': 'babel-polyfill',
+    'landing': './webpack/landing.js'
+  },
+
+  devtool: 'cheap-eval-source-map',
+
+  stats: {
+    errorDetails: true
+  },
+
+  plugins: [
+    new BundleAnalyzerPlugin()
+  ],
+
+  output: {
+    pathinfo: true
+  },
+
+  devServer: {
+    clientLogLevel: 'none',
+    https: settings.dev_server.https,
+    host:  settings.dev_server.host,
+    port:  settings.dev_server.port,
+    contentBase: output.path,
+    publicPath: output.publicPath,
+    compress: true,
+    headers: { 'Access-Control-Allow-Origin': '*' },
+    historyApiFallback: true,
+    watchOptions: {
+      ignored: /node_modules/
+    }
+  }
+});