diff --git a/.babelrc b/.babelrc
index 0b9660231c..6f669bad0e 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,11 @@
 {
-  "plugins": ["syntax-dynamic-import", "transform-runtime"],
+  "plugins": [
+    "syntax-dynamic-import",
+    "transform-runtime",
+    "transform-object-rest-spread",
+    "transform-class-properties",
+    "transform-es2015-destructuring"
+  ],
   "presets": [
     "es2015",
     "react",
@@ -12,7 +18,11 @@
       ]
     },
     "test": {
-      "presets": ["es2015", "react", "stage-0"]
+      "presets": [
+        "es2015",
+        "react",
+        "stage-0"
+      ]
     }
   }
-}
+}
\ No newline at end of file
diff --git a/config/webpack/development.js b/config/webpack/development.js
index 67baa2a333..3df14182a8 100644
--- a/config/webpack/development.js
+++ b/config/webpack/development.js
@@ -1,40 +1,14 @@
 const environment = require('./environment')
 
-const customRules = {
-  module: {
-    rules: [
-      {
-        test: /\.jsx?$/,
-        exclude: /(node_modules)/,
-        enforce: 'pre',
-        loader: 'eslint-loader',
-        options: {
-          configFile: '.eslintrc'
-        }
-      },
-      {
-        test: /\.jsx?|.es6?|.spec.js?$/,
-        exclude: /(node_modules)/,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              presets: ['es2015', 'react'],
-              plugins: ['transform-object-rest-spread', 'transform-class-properties', 'transform-es2015-destructuring']
-            }
-          }
-        ]
-      },
-      {
-        test: /(\.css|\.scss|\.sass)$/,
-        loader: 'style-loader!css-loader!sass-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]'
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
-        loader: 'file-loader?name=assets/[name].[hash].[ext]'
-      }
-    ]
+// Add Webpack custom configs here
+environment.loaders.append('eslint', {
+  test: /\.jsx?$/,
+  exclude: /(node_modules)/,
+  enforce: 'pre',
+  loader: 'eslint-loader',
+  options: {
+    configFile: '.eslintrc'
   }
-}
+})
 
-module.exports = Object.assign({}, environment, customRules)
+module.exports = environment.toWebpackConfig()
diff --git a/config/webpack/environment.js b/config/webpack/environment.js
index 9ea153f6cf..b39bb7fd86 100644
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@@ -1,3 +1,28 @@
 const { environment } = require('@rails/webpacker')
 
-module.exports = environment.toWebpackConfig()
+// Add global webpack configs here
+
+const babelLoader = environment.loaders.get('babel')
+babelLoader.test = /\.jsx?|.spec.js?$/
+
+environment.loaders.delete('css')
+environment.loaders.delete('moduleCss')
+environment.loaders.delete('sass')
+environment.loaders.delete('moduleSass')
+
+environment.loaders.append('style', {
+  test: /(\.css|\.scss|\.sass)$/,
+  use: [
+    { loader: 'style-loader' },
+    { loader: 'css-loader' },
+    {
+      loader: 'sass-loader',
+      options: {
+        modules: true,
+        localIdentName: '[name]---[local]---[hash:base64:5]'
+      }
+    }
+  ]
+})
+
+module.exports = environment
diff --git a/config/webpack/production.js b/config/webpack/production.js
index 1114faa4df..a574aa2d84 100644
--- a/config/webpack/production.js
+++ b/config/webpack/production.js
@@ -1,31 +1,5 @@
 const environment = require('./environment')
 
-const customRules = {
-  module: {
-    rules: [
-      {
-        test: /\.jsx?|.es6?|.spec.js?$/,
-        exclude: /(node_modules)/,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              presets: ['es2015', 'react'],
-              plugins: ['transform-object-rest-spread', 'transform-class-properties', 'transform-es2015-destructuring']
-            }
-          }
-        ]
-      },
-      {
-        test: /(\.css|\.scss|\.sass)$/,
-        loader: 'style-loader!css-loader!sass-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]'
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
-        loader: 'file-loader?name=assets/[name].[hash].[ext]'
-      }
-    ]
-  }
-}
+// Add Webpack custom configs here
 
-module.exports = Object.assign({}, environment, customRules)
+module.exports = environment.toWebpackConfig()
diff --git a/config/webpack/test.js b/config/webpack/test.js
index 1114faa4df..a574aa2d84 100644
--- a/config/webpack/test.js
+++ b/config/webpack/test.js
@@ -1,31 +1,5 @@
 const environment = require('./environment')
 
-const customRules = {
-  module: {
-    rules: [
-      {
-        test: /\.jsx?|.es6?|.spec.js?$/,
-        exclude: /(node_modules)/,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              presets: ['es2015', 'react'],
-              plugins: ['transform-object-rest-spread', 'transform-class-properties', 'transform-es2015-destructuring']
-            }
-          }
-        ]
-      },
-      {
-        test: /(\.css|\.scss|\.sass)$/,
-        loader: 'style-loader!css-loader!sass-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]'
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
-        loader: 'file-loader?name=assets/[name].[hash].[ext]'
-      }
-    ]
-  }
-}
+// Add Webpack custom configs here
 
-module.exports = Object.assign({}, environment, customRules)
+module.exports = environment.toWebpackConfig()