HappyPack and DLL plugin for Relay apps

.babelrc

{
  "plugins": ["babel-relay-plugin-loader"],
  "presets": ["react", "es2015", "stage-0"],
  "passPerPreset": true,
    "env": {
    "development": {
      "plugins": [
        ["react-transform", {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }, {
            "transform": "react-transform-catch-errors",
            "imports": ["react", "redbox-react"]
          }]
        }]
      ]
    }
  }
}

webpack.dev.js

'use strict'

/* eslint-disable global-require */
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const precss = require('precss');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const cssnano = require('cssnano');
const HappyPack = require('happypack');
const fs = require( 'fs' );
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

let babelrc = fs.readFileSync( './.babelrc' );
let babelrcObject = {};

try {
  babelrcObject = JSON.parse( babelrc );
} catch ( err ) {
  console.error( '==>     ERROR: Error parsing .babelrc.' );
  console.error( err );
};

const babelrcObjectDevelopment = babelrcObject.env && babelrcObject.env.development || {};
let combinedPlugins = babelrcObject.plugins || [];
combinedPlugins = combinedPlugins.concat( babelrcObjectDevelopment.plugins );
let babelLoaderQuery = Object.assign({}, babelrcObjectDevelopment, babelrcObject, { plugins: combinedPlugins, cacheDirectory: false });
delete babelLoaderQuery.env;

// Since we use .babelrc for client and server, and we don't want HMR enabled on the server, we have to add
// the babel plugin react-transform-hmr manually here.

// make sure react-transform is enabled
babelLoaderQuery.plugins = babelLoaderQuery.plugins || []
let reactTransform = null
for (let i = 0; i < babelLoaderQuery.plugins.length; ++i ) {
  let plugin = babelLoaderQuery.plugins[ i ]
  if( Array.isArray( plugin ) && plugin[ 0 ] === 'react-transform' ) {
    reactTransform = plugin
  }
}

if( ! reactTransform ) {
  reactTransform = ['react-transform', { transforms: [] } ]
  babelLoaderQuery.plugins.push( reactTransform )
}

if( ! reactTransform[ 1 ] || ! reactTransform[ 1 ].transforms ) {
  reactTransform[ 1 ] = Object.assign( {}, reactTransform[ 1 ], { transforms: [] })
}

// make sure react-transform-hmr is enabled
reactTransform[ 1 ].transforms.push({
  transform: 'react-transform-hmr',
  imports  : [ 'react' ],
  locals   : [ 'module' ]
})

module.exports = {
  entry: {
    app: [
      path.join(__dirname, 'client/index.js'),
      'webpack-dev-server/client?https://localhost:3000',
      'webpack/hot/only-dev-server',
    ],
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].js',
    publicPath: '/',
  },
  devtool: 'cheap-module-eval-source-map',
  debug: true,
  watch: true,
  colors: true,
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loader: 'happypack/loader?id=babel',
      exclude: /node_modules/,
    }, {
      test: /\.scss$/,
      loader: 'style-loader!css-loader!postcss-loader',
      exclude: /node_modules/,
    }, {
      test: /\.css$/,
      loader: 'style-loader!css-loader!postcss-loader',
      exclude: /node_modules/,
    }, {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
      loader: 'url-loader?limit=10000&name=assets/[hash].[ext]',
      exclude: /node_modules/,
    }],
  },
  postcss: function () {
    return [precss, cssnano({
      autoprefixer: {
        add: true,
        remove: true,
        browsers: ['last 2 versions']
      },
      discardComments: {
        removeAll: true
      },
      discardUnused: true,
      mergeIdents: false,
      reduceIdents: false,
      safe: true,
      sourcemap: false,
    })];
  },
  resolve: {
    root: [
      'node_modules'
    ],
    extensions: ['', '.json', '.js', '.jsx']
  },
  plugins: [
    new HappyPack({
      id: 'babel',
      cache: true,
      threads: 4,
      loaders: [{
        path : './node_modules/babel-loader/index.js',
        query: '?' + JSON.stringify( babelLoaderQuery )
      }]
    }),
    new webpack.DllReferencePlugin({
      context: path.join(__dirname),
      manifest: require('./dist/vendor-manifest.json')
    }),
    // new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
    new webpack.NoErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.ProvidePlugin({
      // Makes the keys (i.e. $, _, classNames, etc.) available in any module
      _: 'lodash',
    }),
    new HtmlWebpackPlugin({
      title: 'Hope Commerce',
      template: './client/index.html',
      favicon: './client/assets/favicon.ico',
      mobile: true,
      // inject: false,
      googleAnalytics: true,
      minify: {
        collapseWhitespace: true,
      },
    }),
    new AddAssetHtmlPlugin({
      filename: require.resolve('./dist/vendor.bundle.js'),
      includeSourcemap: true,
    }),
    new webpack.DefinePlugin({
      'process.env': {
        // Useful to reduce the size of client-side libraries, e.g. react
        NODE_ENV: JSON.stringify('development'),
        NODE_TLS_REJECT_UNAUTHORIZED: '0',
      },
    }),
    new webpack.PrefetchPlugin('./client/components/_common/Main/MainComponent.js'),
    new webpack.PrefetchPlugin('./client/components/_common/Product/ProductListItem/QuantityIcon.js'),
    new webpack.PrefetchPlugin('./client/components/_common/Cart/Cart.js'),
    new webpack.PrefetchPlugin('./client/components/_common/Dialog/Auth/AuthDialog.js'),
    new webpack.PrefetchPlugin('./client/components/Layouts/Checkout/AddressFormFields.js'),
    new webpack.PrefetchPlugin('./client/components/_common/Footer/FooterComponent.js'),
    new webpack.PrefetchPlugin('./client/components/Layouts/Checkout/ReviewDetails/ReviewProductItem.js'),
    new webpack.PrefetchPlugin('./client/components/_common/Navbar/NavbarComponent.js'),
    new webpack.PrefetchPlugin('./client/components/App/AppComponent.js'),
    new webpack.PrefetchPlugin('./client/components/Layouts/Checkout/ReviewDetails/ReviewDetails.js'),


  ],
};

webpack.dll.js

var webpack = require('webpack')

module.exports = {
  entry: {
    vendor: ['react', 'react-tap-event-plugin', 'autotrack', 'material-ui', 'react-intl',
      'react-dimensions', 'recompose', 'formsy-material-ui', 'react-helmet',
      'formsy-react', 'react-dom', 'react-relay', 'react-addons-css-transition-group',
      'react-router', 'react-router-relay', 'reflexbox', 'immutable', 'classnames', 'moment',
      'react-router-scroll', 'scroll-behavior', 'dom-helpers', 'redbox-react', 'error-stack-parser', 'stackframe',
      'react-transform-catch-errors', 'react-transform-hmr', 'react-proxy', 'lodash', 'react-deep-force-update',
      'url', 'punycode', 'querystring', 'sockjs-client', 'url-parse', 'requires-port', 'querystringify', 'debug',
      'ms', 'inherits', 'json3', 'strip-ansi', 'ansi-regex',
      'graphql', 'graphql-relay'
    ]
  },
  devtool: '#source-map',
  output: {
    filename: '[name].bundle.js',
    path: 'dist/',
    // The name of the global variable which the library's
    // require() function will be assigned to
    library: '[name]',
  },

  plugins: [
    new webpack.DllPlugin({
      // The path to the manifest file which maps between
      // modules included in a bundle and the internal IDs
      // within that bundle
      path: './dist/[name]-manifest.json',
      // The name of the global variable which the library's
      // require function has been assigned to. This must match the
      // output.library option above
      name: '[name]'
    }),
  ],
}