upgrade webpack from 3.10 to 4.6. update configs to webpack 4. (#140)

* upgrade webpack from 3.10 to 4.6.  update configs to webpack 4. now analyze bundles when running locally

* webpack4 replaces namedmodulesplugin w optimization.namedmodules

* changed path to match others in file

cfg/base.js

@@ -20,6 +20,7 @@ const siaRoot = path.join(__dirname, '..')
 const publicPath = '/assets/'
 
 const config = {
+  mode: 'development',
   entry: {
     app: ['babel-polyfill'],
     appInsights: path.join(siaRoot, 'src/appInsights')
@@ -77,6 +78,9 @@ const config = {
       }
     ]
   },
+  optimization: {
+    noEmitOnErrors: true
+  },
   plugins: [
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': `"${env}"`,

cfg/dev.js

@@ -15,9 +15,7 @@ config.entry.app.push(...[
 ])
 
 config.plugins.push(...[
-  new webpack.HotModuleReplacementPlugin(),
-  new webpack.NamedModulesPlugin(),
-  new webpack.NoEmitOnErrorsPlugin()
+  new webpack.HotModuleReplacementPlugin()
 ])
 
 module.exports = config

cfg/dist.js

@@ -3,42 +3,45 @@ const webpack = require('webpack')
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
 
 const baseConfig = require('./base')
+const siaRoot = path.join(__dirname, '..')
 
 const config = Object.assign({}, baseConfig, {
+  mode: 'production',
   cache: false,
   devtool: 'sourcemap',
+  optimization: {
+    minimizer: [new UglifyJSPlugin({ sourceMap: true })]
+  },
   resolve: {
     modules: [
-      path.resolve(__dirname, '..', 'node_modules')
+      path.resolve(siaRoot, 'node_modules')
     ],
     alias: {
-      src: path.resolve(path.join(__dirname, '..', 'src')),
-      actions: path.resolve(path.join(__dirname, '..', 'src', 'actions')),
-      components: path.resolve(path.join(__dirname, '..', 'src', 'components')),
-      config: path.resolve(path.join(__dirname, '..', 'src', 'config')),
-      containers: path.resolve(path.join(__dirname, '..', 'src', 'containers')),
-      extensionHooks: path.resolve(path.join(__dirname, '..', 'src', 'extensionHooks')),
-      helpers: path.resolve(path.join(__dirname, '..', 'src', 'helpers')),
-      reducers: path.resolve(path.join(__dirname, '..', 'src', 'reducers')),
-      services: path.resolve(path.join(__dirname, '..', 'src', 'services')),
-      static: path.resolve(path.join(__dirname, '..', 'src', 'static')),
-      styles: path.resolve(path.join(__dirname, '..', 'src', 'styles')),
-      configureStore: path.resolve(path.join(__dirname, '..', 'src', 'configureStore'))
+      src: path.resolve(path.join(siaRoot, 'src')),
+      actions: path.resolve(path.join(siaRoot, 'src', 'actions')),
+      components: path.resolve(path.join(siaRoot, 'src', 'components')),
+      config: path.resolve(path.join(siaRoot, 'src', 'config')),
+      containers: path.resolve(path.join(siaRoot, 'src', 'containers')),
+      extensionHooks: path.resolve(path.join(siaRoot, 'src', 'extensionHooks')),
+      helpers: path.resolve(path.join(siaRoot, 'src', 'helpers')),
+      reducers: path.resolve(path.join(siaRoot, 'src', 'reducers')),
+      services: path.resolve(path.join(siaRoot, 'src', 'services')),
+      static: path.resolve(path.join(siaRoot, 'src', 'static')),
+      styles: path.resolve(path.join(siaRoot, 'src', 'styles')),
+      configureStore: path.resolve(path.join(siaRoot, 'src', 'configureStore'))
     }
   },
   resolveLoader: {
     modules: [
-      path.resolve(path.join(__dirname, '..', 'node_modules'))
+      path.resolve(path.join(siaRoot, 'node_modules'))
     ]
   }
 })
 
-config.entry.app.push(path.join(__dirname, '../src/index'))
+config.entry.app.push(path.join(siaRoot, 'src', 'index'))
 
 config.plugins.push(...[
-  new UglifyJSPlugin({ sourceMap: true }),
-  new webpack.optimize.AggressiveMergingPlugin(),
-  new webpack.NoEmitOnErrorsPlugin()
+  new webpack.optimize.AggressiveMergingPlugin()
 ])
 
 module.exports = config

cfg/localhost.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const webpack = require('webpack')
-
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const baseConfig = require('./base')
 
 const config = Object.assign({}, baseConfig, {
@@ -16,8 +16,7 @@ config.entry.app.push(...[
 
 config.plugins.push(...[
   new webpack.HotModuleReplacementPlugin(),
-  new webpack.NamedModulesPlugin(),
-  new webpack.NoEmitOnErrorsPlugin()
+  new BundleAnalyzerPlugin()
 ])
 
 module.exports = config

package.json

@@ -100,10 +100,12 @@
     "style-loader": "^0.19.1",
     "uglifyjs-webpack-plugin": "1.2.3",
     "url-loader": "^0.6.2",
-    "webpack": "^3.10.0",
-    "webpack-dev-middleware": "^2.0.2",
-    "webpack-hot-middleware": "^2.21.0",
-    "webpack-node-externals": "^1.6.0",
+    "webpack": "^4.6.0",
+    "webpack-bundle-analyzer": "^2.11.1",
+    "webpack-cli": "^2.0.14",
+    "webpack-dev-middleware": "^3.1.2",
+    "webpack-hot-middleware": "^2.21.2",
+    "webpack-node-externals": "^1.7.2",
     "webpack-shell-plugin": "^0.5.0"
   },
   "dependencies": {