Feature/webpack (#107)

* Rewrite webpack configs, add dashboard plugin as well
* Add error handling for getDefinition
* Update build deps

Author: nfour

package.json

@@ -16,7 +16,8 @@
     }
   ],
   "scripts": {
-    "start": "webpack-dev-server",
+    "start": "webpack-dev-server --config ./webpack.config.dev.js",
+    "dash": "webpack-dashboard -- yarn start",
     "lint": "eslint src test",
     "test": "jest",
     "test:coverage": "jest --coverage",
@@ -50,16 +51,16 @@
     "superagent": "^3.5.2"
   },
   "devDependencies": {
-    "babel-core": "^6.24.0",
+    "babel-core": "^6.25.0",
     "babel-eslint": "^7.2.1",
     "babel-jest": "^20.0.3",
-    "babel-loader": "^6.4.1",
+    "babel-loader": "^7.0.0",
     "babel-polyfill": "^6.23.0",
     "babel-preset-es2015": "^6.24.0",
     "babel-preset-react": "^6.23.0",
     "babel-preset-stage-1": "^6.22.0",
     "balloon-css": "^0.4.0",
-    "css-loader": "^0.27.3",
+    "css-loader": "^0.28.4",
     "eslint": "^3.19.0",
     "eslint-config-standard": "^10.2.1",
     "eslint-config-standard-react": "^5.0.0",
@@ -68,18 +69,20 @@
     "eslint-plugin-promise": "^3.5.0",
     "eslint-plugin-react": "^7.0.1",
     "eslint-plugin-standard": "^3.0.1",
-    "extract-text-webpack-plugin": "^2.1.0",
-    "file-loader": "^0.11.1",
+    "extract-text-webpack-plugin": "^2.1.2",
+    "file-loader": "^0.11.2",
     "fs-extra": "^3.0.1",
     "html-webpack-plugin": "^2.28.0",
     "jest": "^20.0.4",
     "json-loader": "^0.5.4",
     "node-sass": "^4.5.1",
     "react-addons-perf": "^15.4.2",
+    "react-dev-utils": "^3.0.0",
     "react-test-renderer": "^15.5.4",
     "sass-loader": "^6.0.3",
-    "style-loader": "^0.16.0",
-    "webpack": "^2.3.2",
+    "style-loader": "^0.18.2",
+    "webpack": "^2.6.1",
+    "webpack-dashboard": "^0.4.0",
     "webpack-dev-server": "^2.4.2",
     "webpack-merge": "^4.1.0"
   }

src/store/definition/actions.js

@@ -34,6 +34,8 @@ function parseDefinitionFailure (error) {
 }
 
 export default function getDefinition (url, parserType) {
+  if (!url) { throw new Error('getDefinition called without a url') }
+
   return (dispatch) => {
     request
       .get(url)

webpack.config.dev.js

@@ -1,14 +1,26 @@
-module.exports = () => {
-  return {
-    devtool: 'source-map',
-    devServer: {
-      contentBase: `${__dirname}/src`,
-      compress: false,
-      port: 8200,
-      historyApiFallback: true
-    },
-    output: {
-      path: `${__dirname}/src`
-    }
-  };
-};
+const DashboardPlugin = require('webpack-dashboard/plugin')
+const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin')
+const webpackMerge = require('webpack-merge')
+const baseConfig = require('./webpack.config')
+
+console.log('\nwebpack.config.dev\n')
+
+module.exports = webpackMerge(baseConfig, {
+  plugins: [
+    new DashboardPlugin(),
+    new WatchMissingNodeModulesPlugin(`${__dirname}/node_modules`)
+  ],
+
+  devtool: 'source-map',
+
+  devServer: {
+    contentBase: './src',
+    compress: false,
+    port: 8200,
+    historyApiFallback: true,
+    watchOptions: { aggregateTimeout: 100 },
+    stats: { chunkModules: false }
+  },
+
+  output: { path: `${__dirname}/src` }
+})

webpack.config.js

@@ -1,85 +1,94 @@
-const webpackMerge = require('webpack-merge');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const devConfig = require('./webpack.config.dev');
-const pkgJson = require('./package.json');
+const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const pkgJson = require('./package.json')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
 
-const isProduction = PRODUCTION = process.env.NODE_ENV === 'prod';
+const isProduction = process.env.NODE_ENV === 'prod'
 
 const extractSass = new ExtractTextPlugin({
-  filename: "bundle.css",
+  filename: 'bundle.css',
   disable: !isProduction
-});
+})
 
-let webpackConfig = {
+module.exports = {
   context: `${__dirname}/src`,
   entry: {
-    bundle: [
-      './index.js'
-    ],
+    bundle: ['core-js/es7', './index.js'],
 
     // Everything in the `dependencies` should be considered a `vendor` library
-    vendor: [].concat(Object.keys(pkgJson.dependencies))
+    vendor: [
+      'core-js/es7'
+    ].concat(Object.keys(pkgJson.dependencies))
   },
   output: {
     path: `${__dirname}/dist`,
     publicPath: '/',
     filename: '[name].[chunkhash].js'
   },
-
-  resolve: {
-    modules: ['src/', 'node_modules'],
-    extensions: ['.js', '.jsx', '.json']
-  },
   plugins: [
     extractSass,
+
+    new webpack.optimize.CommonsChunkPlugin({
+      names: ['vendor', 'manifest']
+    }),
+
     /**
      * This renders out an `./dist/index.html` with all scripts, title etc. attached
      */
     new HtmlWebpackPlugin({
       title: pkgJson.description || pkgJson.name,
       filename: 'index.html',
       template: './index.html'
+    }),
+
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
+      }
     })
   ],
+  resolve: {
+    modules: ['src/', 'node_modules'],
+    extensions: ['.js', '.jsx', '.json']
+  },
+  performance: { hints: false },
+  node: {
+    fs: 'empty'
+  },
   module: {
     rules: [
+      // JS
       {
-        test: /\.js?/,
-        exclude: /node_modules/,
-        loader: 'babel-loader'
+        test: /\.jsx?$/,
+        loader: 'babel-loader',
+        exclude: [/node_modules/]
       },
+
+      // JSON
       {
         test: /\.json$/,
         loader: 'json-loader'
       },
+
+      // SASS/CSS
       {
         test: /\.(css|scss)$/,
         use: extractSass.extract({
           use: [{
-            loader: "css-loader"
+            loader: 'css-loader'
           }, {
-            loader: "sass-loader"
+            loader: 'sass-loader'
           }],
           // use style-loader in development
-          fallback: "style-loader"
+          fallback: 'style-loader'
         })
       },
+
+      // ASSETS
       {
         test: /\.(ttf|eot|svg|png|gif|jpg|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
         loader: 'file-loader'
       }
     ]
-  },
-  node: {
-    fs: 'empty'
   }
-};
-
-if (!isProduction) {
-  webpackConfig = webpackMerge(webpackConfig, devConfig());
 }
-
-module.exports = () => {
-  return webpackConfig;
-};