updated to webpack 4 & associated pkgs! closes #66

main.jsx

@@ -6,30 +6,13 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { AppContainer } from 'react-hot-loader';
 import App from './src/components/App.jsx';
 import store from '@store';
 
 ReactDOM.render(
-	<AppContainer>
-		<Provider store={ store }>
-			<App/>
-		</Provider>
-	</AppContainer>,
+	<Provider store={ store }>
+		<App/>
+	</Provider>
+	,
 	document.getElementById('root')
 );
-
-// Hot Module Replacement API
-if (module.hot) {
-	module.hot.accept('./src/components/App', () => {
-		const NextApp = require('./src/components/App').default;
-		ReactDOM.render(
-			<AppContainer>
-				<Provider store={ store }>
-					<NextApp/>
-				</Provider>
-			</AppContainer>,
-			document.getElementById('root')
-		);
-	});
-}

package.json

@@ -45,8 +45,7 @@
                 "eslint-plugin-import": "^2.9.0",
                 "eslint-plugin-react": "^7.7.0",
                 "flow-bin": "^0.66.0",
-                "html-webpack-harddisk-plugin": "^0.1.0",
-                "html-webpack-plugin": "^2.30.1",
+                "html-webpack-plugin": "^3.0.6",
                 "husky": "^0.14.3",
                 "karma": "^2.0.0",
                 "karma-chrome-launcher": "^2.2.0",
@@ -62,7 +61,7 @@
                 "postcss-cssnext": "^3.1.0",
                 "postcss-loader": "^2.1.1",
                 "postcss-smart-import": "^0.7.6",
-                "react-hot-loader": "^3.1.3",
+                "react-hot-loader": "^4.0.0",
                 "react-popper": "^0.8.2",
                 "react-test-renderer": "^16.2.0",
                 "redux-devtools": "^3.4.1",
@@ -73,8 +72,9 @@
                 "stylelint-config-standard": "^18.2.0",
                 "svg-inline-loader": "^0.8.0",
                 "uglifyjs-webpack-plugin": "^1.2.2",
-                "webpack": "^3.11.0",
-                "webpack-dev-server": "^2.11.2",
+                "webpack": "^4.1.1",
+                "webpack-cli": "^2.0.10",
+                "webpack-dev-server": "^3.1.0",
                 "webpack-visualizer-plugin": "^0.1.11",
                 "worker-loader": "^1.1.1"
         },

src/components/App.jsx

@@ -11,6 +11,7 @@ import {
 	Route,
 	Switch,
 } from 'react-router-dom';
+import { hot } from 'react-hot-loader';
 
 import MainNav from './MainNav.jsx';
 import MainContent from './MainContent.jsx';
@@ -44,4 +45,4 @@ class App extends React.PureComponent<Props, State> {
 	}
 }
 
-export default App;
+export default hot(module)(App);

webpack.config.js

@@ -2,7 +2,6 @@
 const { resolve } = require('path');
 var webpack = require('webpack')
 const VisualizerPlugin = require('webpack-visualizer-plugin');
-const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
@@ -18,7 +17,8 @@ module.exports = {
 			'./main.jsx',
 		]
 	},
-
+	mode: 'development',
+	devtool: 'inline-source-map',
 	output: {
 		// use [name] for sanity checks & debugging
 		filename: '[name].js',
@@ -88,8 +88,6 @@ module.exports = {
 	},
 	devServer: {
 	},
-	// fancy sourcemaps
-	devtool: 'eval-source-map',
 	plugins: [
 		//uses the index.ejs template to generate dynamic html pages based on hashes
 		new HtmlWebpackPlugin({
@@ -97,38 +95,10 @@ module.exports = {
 			template: 'index.html'
 		}),
 
-		// instead of hashes for module names, use names
-		new webpack.NamedModulesPlugin(),
-		//new webpack.HashedModuleIdsPlugin(),
-
-		new webpack.optimize.CommonsChunkPlugin({
-			name: 'main',
-			chunks: [ 'main' ],
-			minChunks: isExternal
-
-		}),
-
-		new webpack.optimize.CommonsChunkPlugin({
-			name: 'vendor',
-			minChunks: (module) => !isExternal(module)
-		}),
-
-		new webpack.optimize.CommonsChunkPlugin({
-			name: 'manifest',
-			minChunks: Infinity
-		}),
-
-
-		//scope hoisting
-		//breaks HMR somehow, don't use it
-		//new webpack.optimize.ModuleConcatenationPlugin(),
-
 
 		/*******************
 		 * POST-PROCESSING *
 		 *******************/
-		//always write to disk
-		new HtmlWebpackHarddiskPlugin(),
 
 		//generate a little viz for insight into bundle contents/sizes
 		new VisualizerPlugin()
@@ -160,11 +130,8 @@ if(process.env.NODE_ENV === 'test'){
 // PROD
 // TODO: pull out into different webpack config
 if (process.env.NODE_ENV === 'production') {
+	module.mode = 'production';
 	module.exports.output.publicPath = './';
-	// simpler source map alg
-	module.exports.devtool = 'source-map';
-	// use [hash] to prevent using stale caches
-	module.exports.output.filename = '[name]-[hash].js',
 	module.exports.plugins = [
 		// make sure the env is the string 'production'
 		new webpack.DefinePlugin({
@@ -173,11 +140,5 @@ if (process.env.NODE_ENV === 'production') {
 				NODE_ENV: '"production"'
 			}
 		}),
-		// minimize
-		new webpack.LoaderOptionsPlugin({
-			minimize: true,
-			debug: false
-		}),
-		new UglifyJsPlugin(),
 	].concat(module.exports.plugins);
 }