Webpack-Config + Webpack Validation

webpack.config.base.js

'use strict'; // eslint-disable-line strict
/* eslint no-unused-vars: 0 */

const fs = require('fs');
const { resolve } = require('path');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const WebpackToolsPlugin = require('webpack-isomorphic-tools/plugin');
const webpackToolsConfig = require('./webpack.isomorphic.tools');
const Config = require('webpack-config').Config;
const webpackConfig = new Config();

const appConfig = require('../index');

const debug = require('debug');
debug.enable('wh3rk:*');
const log = debug('wh3rk:boot');

// Globals
const NODE_ENV = process.env.NODE_ENV || 'development';
global.__DEV__ = NODE_ENV !== 'production';
global.__PROD__ = NODE_ENV === 'production';
global.__DEBUG__ = __DEV__;
global.__SERVER__ = true;
global.__CLIENT__ = false;

/* Base Webpack Config */
log('Creating webpack configuration...');
module.exports = webpackConfig.merge({
  context: appConfig.paths.app,

  entry: {
    app: appConfig.paths.entryFile,
    vendor: appConfig.webpack.entry.vendor,
  },

  output: {
    path: appConfig.paths.dist,
    publicPath: appConfig.webpack.output.publicPath,
  },

  resolve: {
    extensions: appConfig.webpack.resolve.extensions,
    root: appConfig.paths.root,
    modulesDirectories: [
      appConfig.paths.modules,
      appConfig.paths.app,
    ],
    fallback: appConfig.paths.modules,
    alias: {
      react: fs.realpathSync(resolve(appConfig.paths.modules, 'react')), // force components to always use this local copy
    },
  },

  externals: {
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true,
    'ws': true,
  },

  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    dns: 'empty',
  },

  resolveLoader: {
    fallback: appConfig.paths.modules,
  },

  module: {
    noParse: ['ws'],

    loaders: [
      {
        test: /\.json$/,
        loader: 'json',
      },
      {
        test: /\.woff(\?.*)?$/,
        loader: 'url?' +
                'prefix=fonts/&' +
                'name=[path][name].[ext]&' +
                'limit=10000&' +
                'mimetype=application/font-woff',
      },
      {
        test: /\.woff2(\?.*)?$/,
        loader: 'url?' +
                'prefix=fonts/&' +
                'name=[path][name].[ext]&' +
                'limit=10000&' +
                'mimetype=application/font-woff2',
      },
      {
        test: /\.ttf(\?.*)?$/,
        loader: 'url?' +
                'prefix=fonts/&' +
                'name=[path][name].[ext]&' +
                'limit=10000&' +
                'mimetype=application/octet-stream',
      },
      {
        test: /\.eot(\?.*)?$/,
        loader: 'file?' +
                'prefix=fonts/&' +
                'name=[path][name].[ext]',
      },
      {
        test: /\.svg(\?.*)?$/,
        loader: 'url?' +
                'prefix=fonts/&' +
                'name=[path][name].[ext]&' +
                'limit=10000&' +
                'mimetype=image/svg+xml',
      },
      {
        test: /\.(ico)|(jpg)|(png)|(jpeg)|(gif)$/,
        loaders: [
          'file-loader',
          'image-webpack?' +
          'optimizationLevel=7&' +
          'interlaced=false',
        ],
      },
    ],
  },

  postcss: [
    cssnano({
      sourcemap: true,
      autoprefixer: {
        add: true,
        remove: true,
        browsers: ['last 2 versions'],
      },
      safe: true,
      discardComments: {
        removeAll: true,
      },
    }),
  ],

 /*
  postcss: [
    autoprefixer({
      add: true,
      remove: true,
      browsers: ['last 2 versions'],
    }),
  ],
  */

  eslint: {
    configFile: resolve(appConfig.paths.root, '.eslintrc.js'),
  },

  plugins: [
    new webpack.DefinePlugin({
      __DEV__,
      __PROD__,
      __SERVER__,
      __CLIENT__,
      __DEBUG__,
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoErrorsPlugin(),

    new HtmlWebpackPlugin({
      template: resolve(appConfig.paths.static, 'index.html'),
      hash: true,
      favicon: resolve(appConfig.paths.static, 'favicon.ico'),
      filename: 'index.html',
      inject: 'body',
      minify: {
        collapseWhitespace: true,
      },
      appMountId: appConfig.project.appMountId,
      // chunksSortMode: 'dependency',
      // window: {
      //   env: {
      //     apiHost: 'http://myapi.com/api/v1'
      //   }
      // },
      title: appConfig.project.name,
      mobile: true,
      // googleAnalytics: {
      //   trackingId: 'UA-XXXX-XX',
      //   pageViewOnLoad: true
      // },
    }),
    new WebpackToolsPlugin(webpackToolsConfig).development(__DEV__),
  ],
});

webpack.config.development.js

const webpack = require('webpack');
const Config = require('webpack-config').Config;
const webpackConfig = new Config();

const appConfig = require('../index');

const debug = require('debug');
debug.enable('wh3rk:*');
const log = debug('wh3rk:dev');

// Globals
const NODE_ENV = process.env.NODE_ENV || 'development';
global.__DEV__ = NODE_ENV !== 'production';
global.__PROD__ = NODE_ENV === 'production';
global.__DEBUG__ = __DEV__;
global.__SERVER__ = true;
global.__CLIENT__ = false;

log('Extending webpack configuration with development settings: ');
log('Adding HMR entry points');
log('Enable HMR development plugin');

module.exports = webpackConfig.extend('config/webpack/webpack.config.base.js').merge({
  devtool: appConfig.webpack.dev.devtool,

  entry: {
    app: [
      'react-hot-loader/patch',
      'webpack-hot-middleware/client',
      appConfig.paths.entryFile,
    ],
    vendor: appConfig.webpack.vendor,
  },

  output: {
    path: appConfig.paths.dist,
    publicPath: appConfig.webpack.output.publicPath,
    filename: `[name].[${ appConfig.webpack.dev.hash_type }].js`,
    chunkFilename: `[id].[${ appConfig.webpack.dev.hash_type }].js`,
    sourceMapFilename: '[file].map',
    library: 'App',
    libraryTarget: 'umd', // others: var, this, commonjs, commonjs2, amd, umd
  },

  stats: appConfig.webpack.dev.stats,

  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel',
        query: {
          presets: ['react', ['es2015', { modules: false }], 'stage-0'],
          plugins: ['transform-decorators-legacy', 'react-hot-loader/babel'],
        },
        include: appConfig.paths.app,
      },
      //{
      //  test: /\.(css|scss)$/,
      //  loaders: [
      //    'style',
      //    'css?' +
      //    'modules&' +
      //    'localIdentName=[local]__[hash:base64:4]&' +
      //    'importLoaders=1&' +
      //    'sourceMap',
      //    'postcss',
      //    'sass?sourceMap',
      //  ],
      //},
      // Any .scss file in ./src/... *except* those in ./src/styles/
      // are local css modules. the class names and ids will be changed to:
      // [name]-[local]-[hash:base64:5]
      {
        test: /\.scss$/,
        include: /src\/(?!styles).+/,
        loaders: [
          'style',
          'css?modules&sourceMap&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
          'postcss',
          'sass',
        ],
      },
      // Any .scss files in ./src/styles are treated as normal (not local)
      // sass files, and so class names and ids will remain as specified
      {
        test: /\.scss$/,
        include: /src\/styles/,
        loader: 'style!css?sourceMap!postcss!sass',
      },
    ],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
      __DEV__,
      __PROD__,
      __SERVER__,
      __CLIENT__,
      __DEBUG__,
    }),
  ],
});

webpack.config.js

'use strict'; // eslint-disable-line strict

const WebpackConfig = require('webpack-config');

const validate = require('webpack-validator');
const Joi = require('webpack-validator').Joi;

const environment = WebpackConfig.environment;
const BaseConfig = new WebpackConfig.Config();

environment.setAll({
  env: () => process.env.NODE_ENV,
});

const entryWebpackConfig = BaseConfig.extend('config/webpack/webpack.config.[env].js');
// This joi schema will be `Joi.concat`-ed with the internal schema
const webpackValidatorExtension = Joi.object({
  // this would just allow the property and doesn't perform any additional validation
  DEPENDENCY_TREE: Joi.any(),
});

module.exports = validate(entryWebpackConfig, { schemaExtension: webpackValidatorExtension });

webpack.config.production.js

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');
const Config = require('webpack-config').Config;
const webpackConfig = new Config();
const appConfig = require('../index');

const debug = require('debug');
debug.enable('wh3rk:*');
const log = debug('wh3rk:prod');

/* Globals */
const NODE_ENV = process.env.NODE_ENV || 'development';
global.__DEV__ = NODE_ENV !== 'production';
global.__PROD__ = NODE_ENV === 'production';
global.__DEBUG__ = __DEV__;
global.__SERVER__ = true;
global.__CLIENT__ = false;

log('Extending webpack configuration with production settings: ');
log('Applying ExtractTextPlugin to CSS loaders.');
log('Adding ExtractText UglifyJs and Dedupe plugins');

module.exports = webpackConfig.extend('config/webpack/webpack.config.base.js').merge({
  devtool: 'source-map',

  entry: {
    app: [appConfig.paths.entryFile],
    vendor: appConfig.webpack.entry.vendor,
  },

  output: {
    path: `${ appConfig.paths.dist }/[${ appConfig.webpack.prod.hash_type }]/`,
    publicPath: `/[${ appConfig.webpack.prod.hash_type }]/`,
    filename: `[name].[${ appConfig.webpack.prod.hash_type }].js`,
    chunkFilename: `[id].[${ appConfig.webpack.prod.hash_type }].js`,
    sourceMapFilename: '[file].map',
    library: 'App',
    libraryTarget: 'umd', // others: var, this, commonjs, commonjs2, amd, umd
  },

  stats: appConfig.webpack.prod.stats,

  bail: true,

  cache: true,

  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel',
        query: {
          presets: ['react', ['es2015', { modules: false }], 'stage-0'],
          plugins: ['transform-decorators-legacy'],
        },
        include: appConfig.paths.app,
      },
      {
        test: /\.(css|scss)$/,
        loader: ExtractTextPlugin.extract(
          { fallbackLoader: 'style-loader',
            loader: 'css?' +
            'modules&' +
            'localIdentName=[hash:base64:4]&' +
            'importLoaders=1&' +
            'sourceMap?' +
            'postcss?' +
            'sass?' +
            'sourceMap',
          }
        ),
      },
    ],
  },

  plugins: [
    new ExtractTextPlugin('app.[contenthash:20].css'),

    new webpack.optimize.DedupePlugin(),

    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
        unused: true,
        dead_code: true,
      },
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
      __DEV__,
      __PROD__,
      __SERVER__,
      __CLIENT__,
      __DEBUG__,
    }),
  ],
});

webpack.config.test.js

const webpack = require('webpack');
const Config = require('webpack-config');
const webpackConfig = new Config.Config();

const appConfig = require('../index');

const debug = require('debug');
debug.enable('wh3rk:*');
const log = debug('wh3rk:test');

/* Globals */
const NODE_ENV = process.env.NODE_ENV || 'test';
global.__DEV__ = NODE_ENV !== 'production';
global.__PROD__ = NODE_ENV === 'production';
global.__DEBUG__ = __DEV__;
global.__SERVER__ = true;
global.__CLIENT__ = false;

log('Extending webpack configuration with test settings.');
log('...');
log('...');

module.exports = webpackConfig.extend('config/webpack/webpack.config.base.js').merge({
  entry: {
    app: [appConfig.paths.entryFile],
    vendor: appConfig.webpack.vendor,
  },

  output: {
    path: `${ appConfig.paths.dist }/[${ appConfig.webpack.test.hash_type }]/`,
    publicPath: `/[${ appConfig.webpack.test.hash_type }]/`,
    filename: `[name].[${ appConfig.webpack.test.hash_type }].js`,
    chunkFilename: `[id].[${ appConfig.webpack.test.hash_type }].js`,
    sourceMapFilename: '[file].map',
    library: 'App',
    libraryTarget: 'umd', // others: var, this, commonjs, commonjs2, amd, umd
  },

  stats: appConfig.webpack.test.stats,

  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel',
        query: {
          presets: ['react', ['es2015', { modules: false }], 'stage-0'],
          plugins: ['transform-decorators-legacy'],
        },
        include: appConfig.paths.app,
      },
      {
        test: /\.(css|scss)$/,
        loaders: [
          'style',
          'css?' +
          'modules&' +
          'localIdentName=[local]__[hash:base64:4]&' +
          'importLoaders=1&' +
          'sourceMap',
          'postcss',
          'sass?sourceMap',
        ],
      },
    ],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('test'),
      __DEV__,
      __PROD__,
      __SERVER__,
      __CLIENT__,
      __DEBUG__,
    }),
  ],
});