refactor($webpack-config): Refactored webpack configuration to look simpler

Removed redundant imports and plugins and applied better formatting

Author: Eduard Kyvenko

config/webpack.config.dev.js

@@ -1,8 +1,9 @@
 const autoprefixer = require('autoprefixer');
-const webpack = require('webpack');
+const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
+const DefinePlugin = require('webpack/lib/DefinePlugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const paths = require('../config/paths');
 const getClientEnvironment = require('./env');
+const paths = require('../config/paths');
 
 module.exports = {
 
@@ -43,6 +44,7 @@ module.exports = {
   module: {
     noParse: /\.elm$/,
     rules: [
+
       {
         test: /\.elm$/,
         exclude: [ /elm-stuff/, /node_modules/ ],
@@ -59,14 +61,34 @@ module.exports = {
           }
         ]
       },
+
       {
         test: /\.css$/,
         use: [
-          {loader: 'style-loader'},
-          {loader: 'css-loader'},
-          {loader: 'postcss-loader'}
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader'
+          },
+          {
+            loader: 'postcss-loader', options: {
+            ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+            plugins: () => [
+              autoprefixer({
+                browsers: [
+                  '>1%',
+                  'last 4 versions',
+                  'Firefox ESR',
+                  'not ie < 9'
+                ]
+              })
+            ]
+          }
+          }
         ]
       },
+
       {
         exclude: [
           /\.html$/,
@@ -81,6 +103,7 @@ module.exports = {
           name: 'static/media/[name].[hash:8].[ext]'
         }
       },
+
       // "file" loader for svg
       {
         test: /\.svg$/,
@@ -92,26 +115,15 @@ module.exports = {
     ]
   },
   plugins: [
-    new webpack.DefinePlugin(getClientEnvironment()),
+
+    new DefinePlugin(getClientEnvironment()),
+
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.template,
       favicon: paths.favicon
     }),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.LoaderOptionsPlugin({
-      options: {
-        postcss: [
-          autoprefixer({
-            browsers: [
-              '>1%',
-              'last 4 versions',
-              'Firefox ESR',
-              'not ie < 9'
-            ]
-          })
-        ]
-      }
-    }),
+
+    new HotModuleReplacementPlugin(),
   ]
 };

config/webpack.config.prod.js

@@ -1,11 +1,13 @@
 const autoprefixer = require('autoprefixer');
 const webpack = require('webpack');
-const paths = require('../config/paths');
+const DefinePlugin = require('webpack/lib/DefinePlugin');
+const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const AssetsPlugin = require('assets-webpack-plugin');
 const getClientEnvironment = require('./env');
+const paths = require('../config/paths');
 
 const root = process.cwd();
 
@@ -53,8 +55,25 @@ module.exports = {
         use: ExtractTextPlugin.extract({
           fallbackLoader: 'style-loader',
           loader: [
-            {loader: 'css-loader'},
-            {loader: 'postcss-loader'}
+            {
+              loader: 'css-loader'
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+                plugins: () => [
+                  autoprefixer({
+                    browsers: [
+                      '>1%',
+                      'last 4 versions',
+                      'Firefox ESR',
+                      'not ie < 9'
+                    ]
+                  })
+                ]
+              }
+            }
           ]
         })
       },
@@ -86,7 +105,7 @@ module.exports = {
 
     new AssetsPlugin({ path: paths.dist }),
 
-    new webpack.DefinePlugin(getClientEnvironment()),
+    new DefinePlugin(getClientEnvironment()),
 
     // Remove the content of the ./dist/ folder.
     new CleanWebpackPlugin([ 'dist' ], {
@@ -96,7 +115,7 @@ module.exports = {
     }),
 
     // Minify the compiled JavaScript.
-    new webpack.optimize.UglifyJsPlugin({
+    new UglifyJsPlugin({
       compress: {
         warnings: false
       },
@@ -105,21 +124,6 @@ module.exports = {
       }
     }),
 
-    new webpack.LoaderOptionsPlugin({
-      options: {
-        postcss: [
-          autoprefixer({
-            browsers: [
-              '>1%',
-              'last 4 versions',
-              'Firefox ESR',
-              'not ie < 9'
-            ]
-          })
-        ]
-      }
-    }),
-
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.template,