update webpack/config

.travis.yml

@@ -19,4 +19,3 @@ install:
   - export DISPLAY=':99.0'
   - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
   - npm install
-  - (cd test/app && npm install)

package.json

@@ -39,8 +39,7 @@
     "source-map-support": "^0.5.3",
     "tslib": "^1.8.1",
     "url-parse": "^1.2.0",
-    "walk-sync": "^0.3.2",
-    "webpack": "^3.10.0"
+    "walk-sync": "^0.3.2"
   },
   "devDependencies": {
     "@std/esm": "^0.19.7",
@@ -63,7 +62,8 @@
     "svelte": "^1.49.1",
     "svelte-loader": "^2.3.2",
     "ts-node": "^4.1.0",
-    "typescript": "^2.6.2"
+    "typescript": "^2.6.2",
+    "webpack": "^4.1.0"
   },
   "scripts": {
     "cy:open": "cypress open",

src/webpack/index.ts

@@ -6,12 +6,7 @@ export default {
 	client: {
 		entry: () => {
 			return {
-				main: [
-					'./app/client.js',
-					// workaround for https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/456
-					'style-loader/lib/addStyles',
-					'css-loader/lib/css-base'
-				]
+				main: './app/client.js'
 			};
 		},
 
@@ -34,11 +29,27 @@ export default {
 
 		output: () => {
 			return {
-				path: `${dest()}`,
+				path: dest(),
 				filename: '[name].js',
 				chunkFilename: '[hash]/[name].[id].js',
 				libraryTarget: 'commonjs2'
 			};
 		}
+	},
+
+	serviceworker: {
+		entry: () => {
+			return {
+				'service-worker': './app/service-worker.js'
+			};
+		},
+
+		output: () => {
+			return {
+				path: dest(),
+				filename: '[name].js',
+				chunkFilename: '[name].[id].[hash].js'
+			}
+		}
 	}
-};
+};

test/app/package.json

@@ -23,6 +23,6 @@
     "svelte": "^1.56.0",
     "svelte-loader": "^2.3.3",
     "uglifyjs-webpack-plugin": "^1.2.2",
-    "webpack": "^3.11.0"
+    "webpack": "^4.1.0"
   }
 }

test/app/webpack/client.config.js

@@ -1,8 +1,11 @@
 const config = require('../../../webpack/config.js');
 const webpack = require('webpack');
 
+const mode = process.env.NODE_ENV;
+const isDev = mode === 'development';
+
 module.exports = {
-	entry: './app/client.js',
+	entry: config.client.entry(),
 	output: config.client.output(),
 	resolve: {
 		extensions: ['.js', '.html']
@@ -16,24 +19,16 @@ module.exports = {
 					loader: 'svelte-loader',
 					options: {
 						hydratable: true,
-						emitCss: !config.dev,
 						cascade: false,
 						store: true
 					}
 				}
-			},
-			{
-				test: /\.css$/,
-				use: [
-					{ loader: "style-loader" },
-					{ loader: "css-loader" }
-				]
 			}
-		].filter(Boolean)
+		]
 	},
+	mode,
 	plugins: [
-		config.dev && new webpack.HotModuleReplacementPlugin(),
-		!config.dev && new webpack.optimize.ModuleConcatenationPlugin()
+		isDev && new webpack.HotModuleReplacementPlugin()
 	].filter(Boolean),
-	devtool: config.dev ? 'inline-source-map' : false
+	devtool: isDev && 'inline-source-map'
 };

test/app/webpack/server.config.js

@@ -3,9 +3,7 @@ const pkg = require('../package.json');
 const sapper_pkg = require('../../../package.json');
 
 module.exports = {
-	entry: {
-		'server': './app/server.js'
-	},
+	entry: config.server.entry(),
 	output: config.server.output(),
 	target: 'node',
 	resolve: {
@@ -28,5 +26,9 @@ module.exports = {
 				}
 			}
 		]
+	},
+	mode: process.env.NODE_ENV,
+	performance: {
+		hints: false // it doesn't matter if server.js is large
 	}
 };

test/app/webpack/service-worker.config.js

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