webpack 4

package.json

@@ -43,8 +43,8 @@
     "eslint-loader": "^2.0.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-react": "^7.0.0",
+    "html-webpack-plugin": "^3.0.7",
     "extract-text-webpack-plugin": "3.0.2",
-    "html-webpack-plugin": "^3.0.0",
     "isparta-loader": "^2.0.0",
     "karma": "^2.0.0",
     "karma-chai": "^0.1.0",
@@ -54,23 +54,27 @@
     "karma-mocha-reporter": "^2.2.1",
     "karma-phantomjs-launcher": "^1.0.4",
     "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^2.0.1",
+    "mini-css-extract-plugin": "^0.2.0",
     "karma-webpack": "^3.0.0",
     "mkdirp": "^0.5.1",
     "mocha": "^5.0.0",
     "node-sass": "^4.5.2",
     "offline-plugin": "^4.5.3",
     "postcss-loader": "^2.0.5",
     "sass-loader": "^6.0.3",
+    "script-ext-html-webpack-plugin": "^2.0.1",
     "script-ext-html-webpack-plugin": "^2.0.0",
     "sinon": "^4.0.0",
     "sinon-chai": "^3.0.0",
     "source-map-loader": "^0.2.0",
     "superstatic": "^5.0.0",
-    "url-loader": "^1.0.0",
-    "webpack": "^3.0.0",
-    "webpack-dashboard": "^1.0.0-3",
-    "webpack-dev-server": "^3.0.0",
-    "webpack-manifest-plugin": "^1.1.0"
+    "url-loader": "^0.6.1",
+    "webpack": "^4.1.1",
+    "webpack-cli": "^2.0.12",
+    "webpack-dashboard": "^1.1.1",
+    "webpack-dev-server": "^3.1.1",
+    "webpack-manifest-plugin": "^2.0.0-rc.2"
   },
   "dependencies": {
     "material-design-lite": "^1.2.1",

webpack.config.babel.js

@@ -1,6 +1,6 @@
 import path from 'path';
 import webpack from 'webpack';
-import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import CompressionPlugin from 'compression-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
@@ -12,6 +12,7 @@ import ScriptExtHtmlWebpackPlugin from 'script-ext-html-webpack-plugin';
 const ENV = process.env.NODE_ENV || 'development';
 
 module.exports = {
+	mode: ENV,
 	entry: {
 		app: './src/index.js',
 		vendor: ['preact', 'preact-router', 'redux', 'preact-mdl']
@@ -32,6 +33,18 @@ module.exports = {
 		}
 	},
 
+	optimization: {
+		splitChunks: {
+			cacheGroups: {
+				commons: {
+					test: /[\\/]node_modules[\\/]/,
+					name: 'vendor',
+					chunks: 'all'
+				}
+			}
+		}
+	},
+
 	module: {
 		rules: [
 			{
@@ -56,20 +69,18 @@ module.exports = {
 			},
 			{
 				test: /\.(scss|css)$/,
-				loader: ExtractTextPlugin.extract(
-					'css-loader?sourceMap!postcss-loader?sourceMap!sass-loader?sourceMap'
-				)
+				use: [
+					MiniCssExtractPlugin.loader,
+					'css-loader',
+					'sass-loader',
+					'postcss-loader'
+				]
 			}
 		]
 	},
 
 	plugins: [
-		new webpack.optimize.CommonsChunkPlugin({
-			name: 'vendor',
-			minChunks: Infinity
-		}),
-		new webpack.optimize.OccurrenceOrderPlugin(),
-		new ExtractTextPlugin({
+		new MiniCssExtractPlugin({
 			filename: '[name].[chunkhash:5].css',
 			allChunks: true
 		}),
@@ -81,7 +92,9 @@ module.exports = {
 			title: 'Preact Simple Starter',
 			removeRedundantAttributes: true,
 			inject: false,
-			manifest: `${ENV === 'production' ? 'manifest.json' : '/assets/manifest.json'}`,
+			manifest: `${
+				ENV === 'production' ? 'manifest.json' : '/assets/manifest.json'
+			}`,
 			minify: {
 				collapseWhitespace: true,
 				removeComments: true
@@ -146,7 +159,7 @@ module.exports = {
 							threshold: 10240,
 							minRatio: 0.8
 						})
-					]
+				  ]
 				: []
 		),