split webpack config into dev and prod

.gitignore

@@ -2,4 +2,5 @@ node_modules
 .idea
 config/sequelizeCliConfig.js
 config/speechConfig.js
+public/bundle
 server.js

package.json

@@ -6,13 +6,13 @@
   "scripts": {
     "test": "mocha --recursive",
     "test-all": "mocha --recursive",
-    "start": "server.js",
+    "start": "node server.js",
     "lint": "eslint .",
     "fix": "eslint . --fix",
     "precommit": "eslint .",
     "babel": "babel",
-    "build-dev": "webpack",
+    "build-dev": "webpack --config webpack.dev.js",
-    "build-production": "webpack"
+    "build-prod": "webpack --config webpack.prod.js"
   },
   "repository": {
     "type": "git",

react/components/ShowAssetLite/view.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import SEO from 'components/SEO';
-import OpenGraphTags from 'components/OpenGraphTags';
 import { Link } from 'react-router-dom';
 import AssetDisplay from 'components/AssetDisplay';
 import { createPageTitle } from 'utils/pageTitle';
@@ -18,7 +17,6 @@ class ShowLite extends React.Component {
       return (
         <div className='row row--tall flex-container--column flex-container--center-center'>
           <SEO pageTitle={pageTitle} canonicalLink={canonicalLink} metaTags={metaTags} />
-          <OpenGraphTags />
           <div>
             <AssetDisplay />
             <Link id='asset-boilerpate' className='link--primary fine-print' to={`/${claimId}/${name}`}>hosted

webpack.client.common.js

@@ -0,0 +1,32 @@
+const Path = require('path');
+const REACT_ROOT = Path.resolve(__dirname, 'react/');
+
+module.exports = {
+  target: 'web',
+  entry : ['babel-polyfill', 'whatwg-fetch', './react/client.js'],
+  output: {
+    path      : Path.join(__dirname, 'public/bundle/'),
+    publicPath: 'public/bundle/',
+    filename  : 'bundle.js',
+  },
+  module: {
+    loaders: [
+      {
+        test   : /.jsx?$/,
+        loader : 'babel-loader',
+        exclude: /node_modules/,
+        query  : {
+          presets: ['es2015', 'react', 'stage-2'],
+        },
+      },
+    ],
+  },
+  resolve: {
+    modules: [
+      REACT_ROOT,
+      'node_modules',
+      __dirname,
+    ],
+    extensions: ['.js', '.jsx', '.scss'],
+  },
+};

webpack.config.js

@@ -1,91 +0,0 @@
-const Path = require('path');
-const nodeExternals = require('webpack-node-externals');
-const REACT_ROOT = Path.resolve(__dirname, 'react/');
-const merge = require('webpack-merge');
-const TARGET = process.env.npm_lifecycle_event;
-
-const serverBaseConfig = {
-  target: 'node',
-  node  : {
-    __dirname: false,
-  },
-  externals: [nodeExternals()],
-  entry    : ['babel-polyfill', 'whatwg-fetch', './index.js'],
-  output   : {
-    path      : Path.resolve(__dirname),
-    publicPath: '/',
-    filename  : 'server.js',
-  },
-  module: {
-    rules: [
-      {
-        test   : /.jsx?$/,
-        exclude: /node_modules/,
-        loader : 'babel-loader',
-        options: {
-          presets: ['es2015',  'react', 'stage-2'],
-        },
-      },
-      {
-        test  : /.css$/,
-        loader: 'css-loader',
-      },
-    ],
-  },
-  resolve: {
-    modules: [
-      REACT_ROOT,
-      'node_modules',
-      __dirname,
-    ],
-    extensions: ['.js', '.json', '.jsx', '.css'],
-  },
-};
-
-const clientBaseConfig = {
-  target: 'web',
-  entry : ['babel-polyfill', 'whatwg-fetch', './react/client.js'],
-  output: {
-    path      : Path.join(__dirname, 'public/bundle/'),
-    publicPath: 'public/bundle/',
-    filename  : 'bundle.js',
-  },
-  module: {
-    loaders: [
-      {
-        test   : /.jsx?$/,
-        loader : 'babel-loader',
-        exclude: /node_modules/,
-        query  : {
-          presets: ['es2015', 'react', 'stage-2'],
-        },
-      },
-    ],
-  },
-  resolve: {
-    modules: [
-      REACT_ROOT,
-      'node_modules',
-      __dirname,
-    ],
-    extensions: ['.js', '.jsx', '.scss'],
-  },
-};
-
-if (TARGET === 'build-dev') {
-  module.exports = [
-    merge(serverBaseConfig, {
-      watch: true,
-    }),
-    merge(clientBaseConfig, {
-      watch: true,
-    }),
-  ];
-};
-
-if (TARGET === 'build-production') {
-  module.exports = [
-    merge(clientBaseConfig, {}),
-    merge(serverBaseConfig, {}),
-  ];
-};

webpack.dev.js

@@ -0,0 +1,13 @@
+const serverBaseConfig = require('./webpack.server.common.js');
+const clientBaseConfig = require('./webpack.client.common.js');
+const merge = require('webpack-merge');
+
+const devBuildConfig = {
+  watch  : true,
+  devtool: 'inline-source-map',
+};
+
+module.exports = [
+  merge(serverBaseConfig, devBuildConfig),
+  merge(clientBaseConfig, devBuildConfig),
+];

webpack.prod.js

@@ -0,0 +1,22 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const serverBaseConfig = require('./webpack.server.common.js');
+const clientBaseConfig = require('./webpack.client.common.js');
+
+const productionBuildConfig = {
+  devtool: 'source-map',
+  plugins: [
+    new UglifyJSPlugin({
+      sourceMap: true,
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    }),
+  ],
+};
+
+module.exports = [
+  merge(serverBaseConfig, productionBuildConfig),
+  merge(clientBaseConfig, productionBuildConfig),
+];

webpack.server.common.js

@@ -0,0 +1,41 @@
+const Path = require('path');
+const nodeExternals = require('webpack-node-externals');
+const REACT_ROOT = Path.resolve(__dirname, 'react/');
+
+module.exports = {
+  target: 'node',
+  node  : {
+    __dirname: false,
+  },
+  externals: [nodeExternals()],
+  entry    : ['babel-polyfill', 'whatwg-fetch', './index.js'],
+  output   : {
+    path      : Path.join(__dirname, '/'),
+    publicPath: '/',
+    filename  : 'server.js',
+  },
+  module: {
+    rules: [
+      {
+        test   : /.jsx?$/,
+        exclude: /node_modules/,
+        loader : 'babel-loader',
+        options: {
+          presets: ['es2015',  'react', 'stage-2'],
+        },
+      },
+      {
+        test  : /.css$/,
+        loader: 'css-loader',
+      },
+    ],
+  },
+  resolve: {
+    modules: [
+      REACT_ROOT,
+      'node_modules',
+      __dirname,
+    ],
+    extensions: ['.js', '.json', '.jsx', '.css'],
+  },
+};