Update to webpacker 3

Author: tai2

.postcssrc.yml

@@ -1,4 +1,2 @@
 plugins:
-  postcss-smart-import: {}
-  precss: {}
   autoprefixer: {}

Gemfile.lock

@@ -79,7 +79,7 @@ GEM
     mime-types-data (3.2016.0521)
     mini_portile2 (2.3.0)
     minitest (5.10.3)
-    multi_json (1.12.1)
+    multi_json (1.12.2)
     nio4r (2.1.0)
     nokogiri (1.8.1)
       mini_portile2 (~> 2.3.0)
@@ -89,6 +89,8 @@ GEM
     public_suffix (2.0.5)
     puma (3.9.1)
     rack (2.0.3)
+    rack-proxy (0.6.2)
+      rack
     rack-test (0.7.0)
       rack (>= 1.0, < 3)
     rails (5.1.4)
@@ -154,9 +156,9 @@ GEM
       activemodel (>= 5.0)
       bindex (>= 0.4.0)
       railties (>= 5.0)
-    webpacker (2.0)
+    webpacker (3.0.2)
       activesupport (>= 4.2)
-      multi_json (~> 1.2)
+      rack-proxy (>= 0.6.1)
       railties (>= 4.2)
     websocket-driver (0.6.5)
       websocket-extensions (>= 0.1.0)

bin/rails

@@ -1,9 +1,4 @@
 #!/usr/bin/env ruby
-begin
-  load File.expand_path('../spring', __FILE__)
-rescue LoadError => e
-  raise unless e.message.include?('spring')
-end
 APP_PATH = File.expand_path('../config/application', __dir__)
 require_relative '../config/boot'
 require 'rails/commands'

bin/rake

@@ -1,9 +1,4 @@
 #!/usr/bin/env ruby
-begin
-  load File.expand_path('../spring', __FILE__)
-rescue LoadError => e
-  raise unless e.message.include?('spring')
-end
 require_relative '../config/boot'
 require 'rake'
 Rake.application.run

config/webpack/configuration.js

@@ -1,32 +1,3 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
+const environment = require('./environment')
 
-const merge = require('webpack-merge')
-const sharedConfig = require('./shared.js')
-const { settings, output } = require('./configuration.js')
-
-module.exports = merge(sharedConfig, {
-  devtool: 'inline-source-map',
-
-  stats: {
-    errorDetails: true
-  },
-
-  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/
-    }
-  }
-})
+module.exports = environment.toWebpackConfig()

config/webpack/development.js

@@ -0,0 +1,37 @@
+const { environment } = require('@rails/webpacker')
+const merge = require('webpack-merge')
+const { resolve } = require('path')
+
+const globalStylePaths = [
+  resolve('app/assets/stylesheets'),
+  resolve('node_modules')
+]
+
+function enableCssModules(cssLoader) {
+  const cssModuleOptions = {
+    modules: true,
+    sourceMap: true,
+    localIdentName: '[name]__[local]___[hash:base64:5]'
+  }
+  cssLoader.options = merge(cssLoader.options, cssModuleOptions)
+}
+
+// Replace ts-loader with awesome-typescript-loader
+environment.loaders.set('typescript', {
+  test: /\.tsx?$/,
+  exclude: /node_modules/,
+  loader: 'awesome-typescript-loader'
+})
+
+// Limit this loader to specific paths
+const styleLoader = environment.loaders.get('style')
+styleLoader.include = globalStylePaths
+
+// Add modularized css loader for client components
+delete require.cache[require.resolve('@rails/webpacker/package/loaders/style')]
+const moduleStyleLoader = require('@rails/webpacker/package/loaders/style')
+moduleStyleLoader.exclude = globalStylePaths
+enableCssModules(moduleStyleLoader.use.find(el => el.loader === 'css-loader'))
+environment.loaders.set('moduleStyle', moduleStyleLoader)
+
+module.exports = environment

config/webpack/environment.js

@@ -1,35 +1,3 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
+const environment = require('./environment')
 
-/* eslint global-require: 0 */
-
-const webpack = require('webpack')
-const merge = require('webpack-merge')
-const CompressionPlugin = require('compression-webpack-plugin')
-const sharedConfig = require('./shared.js')
-
-module.exports = merge(sharedConfig, {
-  output: { filename: '[name]-[chunkhash].js' },
-  devtool: 'source-map',
-  stats: 'normal',
-
-  plugins: [
-    new webpack.optimize.UglifyJsPlugin({
-      minimize: true,
-      sourceMap: true,
-
-      compress: {
-        warnings: false
-      },
-
-      output: {
-        comments: false
-      }
-    }),
-
-    new CompressionPlugin({
-      asset: '[path].gz[query]',
-      algorithm: 'gzip',
-      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
-    })
-  ]
-})
+module.exports = environment.toWebpackConfig()

config/webpack/extracttext.js

@@ -1,6 +1,3 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
+const environment = require('./environment')
 
-const merge = require('webpack-merge')
-const sharedConfig = require('./shared.js')
-
-module.exports = merge(sharedConfig, {})
+module.exports = environment.toWebpackConfig()