at the end of the day, it was inevitable

frontend/webpack/options/_common.js

@@ -0,0 +1,30 @@
+import config from '../../config'
+
+const isProduction = config.env === 'production'
+
+const buildEntryPoint = function (entryPoint) {
+  let entry = [entryPoint]
+  if (!isProduction) {
+    entry.unshift(
+      'webpack-hot-middleware/client?path=/__webpack_hmr'
+    )
+  }
+  return entry
+}
+
+export const entry = {
+  'cw': buildEntryPoint(`${config.path_client}/main.js`)
+}
+
+export const output = {
+  libraryTarget: 'var',
+  library: 'CW',
+  filename: '[name].js',
+  path: config.path_dist,
+  publicPath: config.compiler_public_path
+}
+
+export const resolve = {
+  root: config.path_client,
+  extensions: ['', '.js']
+}

frontend/webpack/options/_loaders.js

@@ -0,0 +1,111 @@
+import cssnano from 'cssnano'
+import ExtractTextPlugin from 'extract-text-webpack-plugin'
+import config from '../../config'
+
+const isProduction = config.env === 'production'
+
+// ------------------------------------
+// Pre-Loaders
+// ------------------------------------
+export let preLoaders = [
+  {
+    test: /\.js$/,
+    loader: 'eslint',
+    exclude: /node_modules/
+  }
+]
+
+export let eslint = {
+  configFile: `${config.path_base}/.eslintrc`,
+  emitWarning: !isProduction
+}
+
+// ------------------------------------
+// Loaders
+// ------------------------------------
+let sassLoaders = isProduction
+  ? ExtractTextPlugin.extract(
+      'style-loader',
+      'css-loader!postcss-loader!sass-loader'
+    )
+  : 'style-loader!css-loader!postcss-loader!sass-loader'
+
+let cssLoaders = isProduction
+  ? ExtractTextPlugin.extract('style-loader', 'css-loader')
+  : 'style-loader!css-loader'
+
+export let loaders = [
+  // ES-2015
+  {
+    test: /\.js$/,
+    exclude: /node_modules/,
+    loader: 'babel',
+    compact: false,
+    query: {
+      cacheDirectory: true,
+      plugins: ['transform-runtime'],
+      presets: !isProduction
+        ? ['es2015', 'react', 'stage-0', 'react-hmre']
+        : ['es2015', 'react', 'stage-0']
+    }
+  },
+  // Styles
+  {
+    test: /\.scss$/,
+    include: /app/,
+    loader: sassLoaders
+  },
+  {
+    test: /\.css$/,
+    exclude: /app/,
+    loader: cssLoaders
+  },
+  // Fonts
+  {
+    test: /\.woff(\?.*)?$/,
+    loader: 'file?prefix=fonts/&name=[path][name].[ext]'
+  },
+  {
+    test: /\.woff2(\?.*)?$/,
+    loader: 'file?prefix=fonts/&name=[path][name].[ext]'
+  },
+  {
+    test: /\.ttf(\?.*)?$/,
+    loader: 'file?prefix=fonts/&name=[path][name].[ext]'
+  },
+  {
+    test: /\.eot(\?.*)?$/,
+    loader: 'file?prefix=fonts/&name=[path][name].[ext]'
+  },
+  {
+    test: /\.svg(\?.*)?$/,
+    loader: 'file?prefix=fonts/&name=[path][name].[ext]'
+  },
+  // Images
+  { test: /\.(png|jpg|gif)$/, loader: 'url' },
+
+  //json
+  {
+    test: /\.json$/,
+    loader: 'json-loader'
+  }
+]
+
+export let postcss = [
+  cssnano({
+    sourcemap: true,
+    autoprefixer: {
+      add: true,
+      remove: true,
+      browsers: ['last 2 versions']
+    },
+    safe: true,
+    discardComments: {
+      removeAll: true
+    }
+  })
+]
+
+export let sassLoader = {
+  includePaths: `${config.path_client}/styles`
+}

frontend/webpack/options/_plugins.js

@@ -0,0 +1,53 @@
+import webpack from 'webpack'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import ExtractTextPlugin from 'extract-text-webpack-plugin'
+import AddAssetHtmlPlugin from 'add-asset-html-webpack-plugin'
+
+import config from '../../config'
+
+const isProduction = config.env === 'production'
+
+let htmlWebpackOptions = {
+  template: `${config.path_client}/index.html`,
+  hash: false,
+  favicon: `${config.path_client}/static/favicon.ico`,
+  filename: 'index.html',
+  inject: 'body'
+}
+
+if (isProduction) {
+  htmlWebpackOptions.minify = {
+    collapseWhitespace: true
+  }
+}
+
+export let plugins = [
+  new webpack.DefinePlugin(config.globals),
+  new webpack.DllReferencePlugin({
+    context: `${config.path_client}`,
+    manifest: require(config.path_dist + '/cw-vendors-manifest.json')
+  }),
+  new HtmlWebpackPlugin(htmlWebpackOptions),
+  new AddAssetHtmlPlugin({ filename: require.resolve(`${config.path_dist}/cw-vendors.js`), includeSourcemap: false })
+]
+
+if (!isProduction) {
+  plugins = plugins.concat([
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
+  ])
+}
+else {
+  plugins = plugins.concat([
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        unused: true,
+        dead_code: true,
+        warnings: false
+      }
+    }),
+    new ExtractTextPlugin('[name].css')
+  ])
+}

frontend/webpack/vendors/vendors.js

@@ -0,0 +1,8 @@
+require('classnames')
+require('immutable')
+require('react')
+require('react-dom')
+require('react-redux')
+require('redux')
+require('redux-actions')
+require('redux-thunk')

frontend/webpack/webpack.compiler.js

@@ -0,0 +1,43 @@
+import webpack from 'webpack'
+import config from '../config'
+import webpackConfig from './webpack.config'
+import fs from 'fs-extra'
+
+const logCompiler = (err, stats) => {
+  console.log(stats.toString({
+    chunks: false,
+    chunkModules: false,
+    colors: true
+  }))
+
+  const jsonStats = stats.toJson()
+
+  console.log('jsonStats.warnings', jsonStats)
+
+  if (err) {
+    console.log('Webpack compiler encountered a fatal error.', err)
+    process.exit(1)
+  }
+  else if (jsonStats.errors.length > 0) {
+    console.log('Webpack compiler encountered errors.')
+    process.exit(1)
+  }
+  else if (jsonStats.warnings.length > 0) {
+
+    console.log('Webpack compiler encountered warnings.')
+    process.exit(1)
+  }
+  else {
+    console.log('No errors or warnings encountered.')
+  }
+
+  console.log('Copy static assets to dist folder.')
+}
+
+const compiler = webpack(webpackConfig)
+// Build minify version
+compiler.run(logCompiler)
+
+// copy static to dist
+fs.copySync(`${config.path_client}/static`, config.path_dist)
+

frontend/webpack/webpack.config.js

@@ -0,0 +1,24 @@
+import config from '../config'
+
+import { entry, output, resolve } from './options/_common'
+import { plugins } from './options/_plugins'
+import { preLoaders, loaders, eslint, postcss, sassLoader } from './options/_loaders'
+
+const webpackConfig = {
+  name: 'client',
+  target: 'web',
+  devtool: config.compiler_devtool,
+  resolve,
+  entry,
+  output,
+  plugins,
+  module: {
+    preLoaders,
+    loaders
+  },
+  eslint,
+  sassLoader,
+  postcss
+}
+
+export default webpackConfig

frontend/webpack/webpack.dll.js

@@ -0,0 +1,49 @@
+import path from 'path'
+import webpack from 'webpack'
+import config from '../config'
+
+let webpackConfig = {
+  entry: {
+    vendors: [path.join(__dirname, 'vendors/vendors.js')]
+  },
+  output: {
+    path: config.path_dist,
+    filename: 'cw-[name].js',
+    library: '[name]'
+  },
+  plugins: [
+    new webpack.DefinePlugin(config.globals),
+    new webpack.DllPlugin({
+      path: path.join(config.path_dist, 'cw-[name]-manifest.json'),
+      name: '[name]',
+      context: path.resolve(__dirname, '../app')
+    })
+  ],
+  resolve: {
+    root: path.resolve(__dirname, '../app'),
+    modulesDirectories: ['node_modules']
+  }
+}
+
+if (process.env.NODE_ENV === 'production') {
+  webpackConfig.plugins.push(
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        unused: true,
+        dead_code: true
+      }
+    })
+  )
+}
+
+const compiler = webpack(webpackConfig)
+compiler.run((err, stats) => {
+  console.log(stats.toString({
+    chunks: false,
+    chunkModules: false,
+    colors: true
+  }))
+  console.log(err)
+})