Update examples build process

Author: nhunzaker

examples/canvas/Makefile

@@ -1,8 +1,8 @@
 start:
-	@ $$(npm bin)/webpack-dev-server --config ../webpack.config.js
+	@ $$(npm bin)/webpack-dev-server --config ../webpack.config.js --mode=development
 
 build: clean
-	@ $$(npm bin)/webpack -p --config ../webpack.config.js --env=production
+	@ $$(npm bin)/webpack -p --config ../webpack.config.js --env=production --mode=production
 	@ cp public/*.css build/
 
 clean:

examples/chatbot/Makefile

@@ -1,4 +1,4 @@
 start:
-	@ $$(npm bin)/webpack-dev-server --config ./webpack.config.js
+	@ $$(npm bin)/webpack-dev-server --config ./webpack.config.js --mode=development
 
 .PHONY: start

examples/painter/Makefile

@@ -1,8 +1,8 @@
 start:
-	@ $$(npm bin)/webpack-dev-server --config ../webpack.config.js
+	@ $$(npm bin)/webpack-dev-server --config ../webpack.config.js --mode=development
 
 build: clean
-	@ $$(npm bin)/webpack -p --config ../webpack.config.js --env=production
+	@ $$(npm bin)/webpack -p --config ../webpack.config.js --env=production --mode=production
 	@ cp public/*.css build/
 
 clean:

examples/react-router/Makefile

@@ -1,8 +1,8 @@
 start:
-	@ $$(npm bin)/webpack-dev-server --config ../webpack.config.js
+	@ $$(npm bin)/webpack-dev-server --config ../webpack.config.js --mode=development
 
 build: clean
-	@ $$(npm bin)/webpack -p --config ../webpack.config.js --env=production
+	@ $$(npm bin)/webpack -p --config ../webpack.config.js --env=production --mode=production
 	@ cp public/*.css build/
 
 clean:

examples/simple-svg/Makefile

@@ -1,8 +1,8 @@
 start:
-	@ $$(npm bin)/webpack-dev-server --config ../webpack.config.js
+	@ $$(npm bin)/webpack-dev-server --config ../webpack.config.js --mode=development
 
 build: clean
-	@ $$(npm bin)/webpack -p --config ../webpack.config.js --env=production
+	@ $$(npm bin)/webpack -p --config ../webpack.config.js --env=production --mode=production
 	@ cp public/*.css build/
 
 clean:

examples/webpack.config.js

@@ -15,10 +15,10 @@ module.exports = function(env) {
 
   process.env.BABEL_ENV = isDev ? 'development' : 'production'
 
-  let config = {
+  return {
     context: root,
 
-    devtool: 'source-map',
+    devtool: isDev ? 'cheap-module-inline-source-map' : 'source-map',
 
     entry: {
       application: ['./app/boot.js']
@@ -38,84 +38,31 @@ module.exports = function(env) {
     },
 
     module: {
-      loaders: [
+      rules: [
         {
-          test: /\.jsx*/,
+          test: /\.js$/,
           loader: 'babel-loader',
           exclude: /node_modules/,
           options: {
-            cacheDirectory: '.babel-cache',
-            plugins: [
-              'react-hot-loader/babel',
-              ['transform-runtime', { polyfill: false }]
-            ]
+            plugins: [['transform-runtime', { polyfill: false }]]
           }
         }
       ]
     },
 
     plugins: [
-      new Webpack.DefinePlugin({
-        'process.env.NODE_ENV': JSON.stringify(
-          isDev ? 'development' : 'production'
-        )
-      }),
       new HtmlWebpackPlugin({
         inject: true,
         template: resolve(root, 'public/index.html')
-      }),
-      new Webpack.optimize.CommonsChunkPlugin({
-        name: 'vendor',
-        minChunks: function(module) {
-          var context = module.context
-
-          if (context == null) {
-            return false
-          }
-
-          return (
-            context.includes('node_modules') ||
-            context.includes('microcosm/src')
-          )
-        }
       })
     ],
 
-    node: {
-      global: true,
-      console: false,
-      process: false,
-      Buffer: false,
-      __filename: 'mock',
-      __dirname: 'mock',
-      setImmediate: false
-    },
-
     devServer: {
-      hot: isDev,
       contentBase: resolve(root, 'public'),
       publicPath: '/',
       compress: true,
       historyApiFallback: true,
       port: PORT
     }
   }
-
-  if (isDev) {
-    config.devtool = 'cheap-module-inline-source-map'
-
-    config.entry['application'].unshift('react-hot-loader/patch')
-
-    config.entry['dev'] = [
-      'webpack-dev-server/client?http://localhost:' + PORT,
-      'webpack/hot/only-dev-server'
-    ]
-
-    config.plugins.unshift(
-      new Webpack.HotModuleReplacementPlugin(),
-      new Webpack.NamedModulesPlugin()
-    )
-  }
-
-  return config
 }

package.json

@@ -39,7 +39,7 @@
     "axios": "^0.18.0",
     "babel-core": "^6.26.0",
     "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.4",
+    "babel-loader": "^7.0.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
@@ -81,6 +81,7 @@
     "rollup-plugin-uglify": "^6.0.0",
     "uid": "^0.0.2",
     "webpack": "^4.27.1",
+    "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.10",
     "zen-observable": "~0.5.2"
   },