refactor(webpack): removed some boilerplate code

Author: mrtnbroder

webpack/webpack.client.config.js

@@ -1,15 +1,17 @@
 /* eslint-disable no-undefined, object-shorthand */
 
-const path = require('path')
 const config = require('../config/config')
 const merge = require('lodash.merge')
 const paths = require('../config/paths')
 const StatsWriterPlugin = require('webpack-stats-plugin').StatsWriterPlugin
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const webpack = require('webpack')
-const webpackConfig = require('./webpack.config.js')
-const DEBUG = config.DEBUG
+const { webpackConfig, styleLoader, cssLoader, postcssLoader } = require('./webpack.config.js')
+const { DEBUG } = config
 const filename = DEBUG ? '[name].js' : '[name].[chunkhash].js'
 
+const extractCSS = new ExtractTextPlugin({ filename: paths.styleSheet, allChunks: true })
+
 //
 // Client Config
 // -----------------------------------------------------------------------------
@@ -25,47 +27,50 @@ const webpackClientConfig = merge({}, webpackConfig, {
       'react-router',
       'redux',
       'redux-actions',
-      'redux-promise-middleware'
-    ]
+      'redux-promise-middleware',
+      'redux-thunk',
+    ],
   },
   output: {
     chunkFilename: filename,
     filename: filename,
-    path: paths.publicDir
+    path: paths.publicDir,
   },
   module: {
     loaders: webpackConfig.module.loaders.concat([
       {
         test: /\.css$/,
-        loader: `style!css?modules${DEBUG ? '&localIdentName=[name]_[local]_[hash:base64:3]' : ''}!postcss`,
+        loaders: DEBUG
+          ? [styleLoader, cssLoader, postcssLoader]
+          : extractCSS.extract([cssLoader, postcssLoader]),
         exclude: /node_modules/,
-        include: path.resolve('.')
-      }
-    ])
+      },
+    ]),
   },
   plugins: webpackConfig.plugins.concat(
     new webpack.DefinePlugin({ __BROWSER__: true }),
     new webpack.optimize.CommonsChunkPlugin({
       name: config.vendorName,
-      filename: filename
+      filename: filename,
     })
   ).concat(DEBUG ? [] : [
+    extractCSS,
     new webpack.optimize.CommonsChunkPlugin({
       name: config.inlineName,
-      filename: `${config.inlineName}.js`
+      filename: `${config.inlineName}.js`,
     }),
+    new StatsWriterPlugin({ filename: `${config.statsName}.json` }),
     new webpack.optimize.UglifyJsPlugin({
       sourceMap: false,
       output: {
-        comments: false
+        comments: false,
       },
       compress: {
         screw_ie8: true, // eslint-disable-line camelcase
-        warnings: false
-      }
+        warnings: false,
+      },
     }),
-    new StatsWriterPlugin({ filename: `${config.statsName}.json` })
-  ])
+  ]),
 })
 
 module.exports = webpackClientConfig

webpack/webpack.config.js

@@ -1,11 +1,9 @@
 /* eslint-disable no-undefined, object-shorthand */
 
-const path = require('path')
 const webpack = require('webpack')
 const config = require('../config/config')
 const paths = require('../config/paths')
-const DEBUG = config.DEBUG
-const VERBOSE = false
+const { DEBUG } = config
 
 const GLOBALS = {
   '__DEV__': DEBUG,
@@ -21,61 +19,57 @@ const plugins = [
     options: {
       context: paths.contextDir,
       postcss: [
-        require('autoprefixer')({ browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'IE 10'] })
-      ]
-    }
-  })
+        require('autoprefixer')({ browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'IE 10'] }),
+      ],
+    },
+  }),
 ]
 
+exports.styleLoader = 'style-loader'
+exports.postcssLoader = 'postcss-loader'
+exports.cssLoader = {
+  loader: 'css-loader',
+  query: {
+    localIdentName: DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:5]',
+    minimize: !DEBUG,
+    modules: true,
+    sourceMap: DEBUG,
+  },
+}
+
 const webpackConfig = {
   cache: DEBUG,
   context: paths.contextDir,
   bail: !DEBUG,
-  devtool: DEBUG ? 'eval' : undefined,
+  devtool: DEBUG ? 'cheap-eval-source-map' : undefined,
   output: {
     publicPath: '/',
-    path: paths.publicDir
+    path: paths.publicDir,
   },
   module: {
     loaders: [
       {
         test: /\.(js|jsx)$/,
-        loader: 'babel',
+        loader: 'babel-loader',
         query: {
           cacheDirectory: true,
-          plugins: DEBUG ? ['react-hot-loader/babel'] : []
+          plugins: DEBUG ? ['react-hot-loader/babel'] : [],
         },
         exclude: /node_modules/,
-        include: path.resolve('.')
-      }
-    ]
+      },
+    ],
   },
   resolve: {
     modules: ['shared', 'node_modules'],
     extensions: [
       '.web.js',
       '.js',
       '.json',
-      '.jsx'
-    ]
-  },
-  stats: {
-    assets: false,
-    cached: VERBOSE,
-    cachedAssets: VERBOSE,
-    children: VERBOSE,
-    chunkModules: VERBOSE,
-    chunks: VERBOSE,
-    colors: true,
-    context: false,
-    hash: VERBOSE,
-    modules: VERBOSE,
-    reasons: true,
-    source: VERBOSE,
-    timings: true,
-    version: VERBOSE,
+      '.jsx',
+    ],
   },
-  plugins: plugins
+  stats: 'errors-only',
+  plugins: plugins,
 }
 
-module.exports = webpackConfig
+exports.webpackConfig = webpackConfig

webpack/webpack.server.config.js

@@ -1,15 +1,12 @@
 /* eslint-disable no-undefined, object-shorthand */
 
-const path = require('path')
 const webpack = require('webpack')
-const config = require('../config/config')
 const merge = require('lodash.merge')
 const paths = require('../config/paths')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const webpackConfig = require('./webpack.config.js')
-const DEBUG = config.DEBUG
+const { webpackConfig, styleLoader, cssLoader, postcssLoader } = require('./webpack.config.js')
 
-const extractCSS = new ExtractTextPlugin({ filename: paths.styleSheet, disable: false, allChunks: true })
+const extractCSS = new ExtractTextPlugin({ filename: paths.styleSheet, allChunks: true })
 
 //
 // Server Config
@@ -21,42 +18,28 @@ const webpackServerConfig = merge({}, webpackConfig, {
   output: {
     filename: 'server.js',
     libraryTarget: 'commonjs2',
-    path: paths.buildDir
+    path: paths.buildDir,
   },
   module: {
-    loaders: webpackConfig.module.loaders.concat([
-      {
-        test: /\.css$/,
-        loader: extractCSS.extract({ fallbackLoader: 'style', loader: `css?modules${DEBUG ? '&localIdentName=[name]_[local]_[hash:base64:3]' : '&minimize'}!postcss` }),
-        exclude: /node_modules/,
-        include: path.resolve('.')
-      }
-    ])
+    loaders: webpackConfig.module.loaders.concat([{
+      test: /\.css$/,
+      loader: extractCSS.extract({ fallbackLoader: styleLoader, loader: [cssLoader, postcssLoader] }),
+      exclude: /node_modules/,
+    }]),
   },
   plugins: webpackConfig.plugins.concat(
     new webpack.DefinePlugin({ __BROWSER__: false }),
     extractCSS
-  ).concat(DEBUG ? [] : [
-    new webpack.optimize.UglifyJsPlugin({
-      sourceMap: false,
-      output: {
-        comments: false
-      },
-      compress: {
-        screw_ie8: true, // eslint-disable-line camelcase
-        warnings: false
-      }
-    }),
-  ]),
+  ),
   node: {
     __dirname: false,
     __filename: false,
     Buffer: false,
     console: false,
     global: false,
-    process: false
+    process: false,
   },
-  externals: /^[a-z][a-z\.\-0-9]*$/
+  externals: require('webpack-node-externals')(),
 })
 
 module.exports = webpackServerConfig