update to webpack 4

.gitignore

@@ -5,4 +5,5 @@ yarn.lock
 cypress/screenshots
 templates/.*
 export
+build
 app/manifest

package.json

@@ -23,9 +23,9 @@
     "sapper": "^0.7.0",
     "serve-static": "^1.13.1",
     "style-loader": "^0.20.1",
-    "svelte": "^1.51.1",
+    "svelte": "^1.56.0",
     "svelte-loader": "^2.3.3",
     "uglifyjs-webpack-plugin": "^1.1.5",
-    "webpack": "^3.10.0"
+    "webpack": "^4.1.0"
   }
 }

webpack/client.config.js

@@ -1,15 +1,15 @@
 const webpack = require('webpack');
 const config = require('sapper/webpack/config.js');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 
-const isDev = config.dev;
+const mode = process.env.NODE_ENV;
+const isDev = mode === 'development';
 
 module.exports = {
 	entry: config.client.entry(),
 	output: config.client.output(),
 	resolve: {
-		extensions: ['.js', '.html']
+		extensions: ['.js', '.json', '.html']
 	},
 	module: {
 		rules: [
@@ -20,41 +20,16 @@ module.exports = {
 					loader: 'svelte-loader',
 					options: {
 						hydratable: true,
-						emitCss: !isDev,
 						cascade: false,
-						store: true,
+						store: true
-						hotReload: true
 					}
 				}
-			},
-			isDev && {
-				test: /\.css$/,
-				use: [
-					{ loader: 'style-loader' },
-					{ loader: 'css-loader' }
-				]
-			},
-			!isDev && {
-				test: /\.css$/,
-				use: ExtractTextPlugin.extract({
-					fallback: 'style-loader',
-					use: [{ loader: 'css-loader', options: { sourceMap:isDev } }]
-				})
 			}
-		].filter(Boolean)
+		]
 	},
+	mode,
 	plugins: [
-		new webpack.optimize.CommonsChunkPlugin({
+		isDev && new webpack.HotModuleReplacementPlugin()
-			minChunks: 2,
+	].filter(Boolean),
-			async: false,
-			children: true
-		})
-	].concat(isDev ? [
-		new webpack.HotModuleReplacementPlugin()
-	] : [
-		new ExtractTextPlugin('main.css'),
-		new webpack.optimize.ModuleConcatenationPlugin(),
-		new UglifyJSPlugin()
-	]).filter(Boolean),
 	devtool: isDev && 'inline-source-map'
 };

webpack/server.config.js

@@ -2,14 +2,16 @@ const config = require('sapper/webpack/config.js');
 const webpack = require('webpack');
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const pkg = require('../package.json');
 
 module.exports = {
 	entry: config.server.entry(),
 	output: config.server.output(),
 	target: 'node',
 	resolve: {
-		extensions: ['.js', '.html', '.json']
+		extensions: ['.js', '.json', '.html']
 	},
+	externals: Object.keys(pkg.dependencies),
 	module: {
 		rules: [
 			{
@@ -26,5 +28,9 @@ module.exports = {
 				}
 			}
 		]
+	},
+	mode: process.env.NODE_ENV,
+	performance: {
+		hints: false // it doesn't matter if server.js is large
 	}
 };

webpack/service-worker.config.js

@@ -3,15 +3,7 @@ const config = require('sapper/webpack/config.js');
 const webpack = require('webpack');
 
 module.exports = {
-	entry: {
+	entry: config.serviceworker.entry(),
-		'service-worker': './app/service-worker.js'
+	output: config.serviceworker.output(),
-	},
+	mode: process.env.NODE_ENV
-	output: {
-		path: path.resolve(`.sapper`),
-		filename: '[name].js',
-		chunkFilename: '[name].[id].[hash].js'
-	},
-	plugins: [
-		!config.dev && new webpack.optimize.ModuleConcatenationPlugin()
-	].filter(Boolean)
 };