move webpack config out of sapper, into the app

lib/config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+
+exports.dev = process.env.NODE_ENV !== 'production';
+
+exports.templates = path.resolve(process.env.SAPPER_TEMPLATES || 'templates');
+exports.src = path.resolve(process.env.SAPPER_ROUTES || 'routes');
+exports.dest = path.resolve(process.env.SAPPER_DEST || '.sapper');

lib/route_manager.js

@@ -0,0 +1,16 @@
+const glob = require('glob');
+const create_routes = require('../utils/create_routes.js');
+const { src } = require('./config.js');
+
+const route_manager = {
+	routes: create_routes(
+		glob.sync('**/*.+(html|js|mjs)', { cwd: src })
+	),
+
+	onchange(fn) {
+		// TODO in dev mode, keep this updated, and allow
+		// webpack compiler etc to hook into it
+	}
+};
+
+module.exports = route_manager;

package.json

@@ -12,15 +12,11 @@
     "webpack": "^3.10.0"
   },
   "devDependencies": {
-    "extract-text-webpack-plugin": "^3.0.2",
     "mocha": "^4.0.1",
-    "svelte": "^1.47.1",
-    "svelte-loader": "^2.2.1"
+    "svelte": "^1.47.1"
   },
   "peerDependencies": {
-    "extract-text-webpack-plugin": "^3.0.2",
-    "svelte": "^1.47.1",
-    "svelte-loader": "^2.2.1"
+    "svelte": "^1.47.1"
   },
   "scripts": {
     "test": "mocha --opts mocha.opts"

utils/create_webpack_compiler.js

@@ -9,85 +9,13 @@ const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 module.exports = function create_webpack_compiler(out, routes, dev) {
 	const compiler = {};
 
-	const client = webpack({
-		entry: {
-			main: `${out}/main`
-		},
-		resolve: {
-			extensions: ['.js', '.html']
-		},
-		output: {
-			path: `${out}/client`,
-			filename: '[name].[hash].js',
-			chunkFilename: '[name].[id].js',
-			publicPath: '/client/'
-		},
-		module: {
-			rules: [
-				{
-					test: /\.html$/,
-					exclude: /node_modules/,
-					use: {
-						loader: 'svelte-loader',
-						options: {
-							emitCss: true,
-							cascade: false,
-							store: true
-						}
-					}
-				},
-				{
-					test: /\.css$/,
-					use: ExtractTextPlugin.extract({
-						fallback: 'style-loader',
-						use: [{ loader: 'css-loader', options: { sourceMap: dev } }]
-					})
-				}
-			]
-		},
-		plugins: [
-			new ExtractTextPlugin('main.css'),
-			!dev && new webpack.optimize.ModuleConcatenationPlugin(),
-			!dev && new UglifyJSPlugin()
-		].filter(Boolean),
-		devtool: dev ? 'inline-source-map' : false
-	});
+	const client = webpack(
+		require(path.resolve('webpack.client.config.js'))
+	);
 
-	const server_entries = {};
-	routes.forEach(route => {
-		server_entries[route.id] = path.resolve('routes', route.file);
-	});
-
-	const server = webpack({
-		entry: server_entries,
-		target: 'node',
-		resolve: {
-			extensions: ['.js', '.html']
-		},
-		output: {
-			path: `${out}/server`,
-			filename: '[name].[hash].js',
-			chunkFilename: '[name].[id].js',
-			libraryTarget: 'commonjs2'
-		},
-		module: {
-			rules: [
-				{
-					test: /\.html$/,
-					exclude: /node_modules/,
-					use: {
-						loader: 'svelte-loader',
-						options: {
-							css: false,
-							cascade: false,
-							store: true,
-							generate: 'ssr'
-						}
-					}
-				}
-			]
-		}
-	});
+	const server = webpack(
+		require(path.resolve('webpack.server.config.js'))
+	);
 
 	if (false) { // TODO watch in dev
 		// TODO how can we invalidate compiler.client_main when watcher restarts?
@@ -107,7 +35,7 @@ module.exports = function create_webpack_compiler(out, routes, dev) {
 		compiler.client_main = new Promise((fulfil, reject) => {
 			client.run((err, stats) => {
 				if (err || stats.hasErrors()) {
-					console.log(stats.toString());
+					console.log(stats.toString({ colors: true }));
 					reject(err);
 				}
 
@@ -120,7 +48,7 @@ module.exports = function create_webpack_compiler(out, routes, dev) {
 			server.run((err, stats) => {
 				if (err || stats.hasErrors()) {
 					// TODO deal with hasErrors
-					console.log(stats.toString());
+					console.log(stats.toString({ colors: true }));
 					reject(err);
 				}
 

webpack/config.js

@@ -0,0 +1,43 @@
+const path = require('path');
+const route_manager = require('../lib/route_manager.js');
+const { src, dest, dev } = require('../lib/config.js');
+
+module.exports = {
+	dev,
+
+	client: {
+		entry: () => {
+			return {
+				main: `${dest}/main.js`
+			};
+		},
+
+		output: () => {
+			return {
+				path: `${dest}/client`,
+				filename: '[name].[hash].js',
+				chunkFilename: '[name].[id].js',
+				publicPath: '/client/'
+			};
+		}
+	},
+
+	server: {
+		entry: () => {
+			const entries = {};
+			route_manager.routes.forEach(route => {
+				entries[route.id] = path.resolve(src, route.file);
+			});
+			return entries;
+		},
+
+		output: () => {
+			return {
+				path: `${dest}/server`,
+				filename: '[name].[hash].js',
+				chunkFilename: '[name].[id].js',
+				libraryTarget: 'commonjs2'
+			};
+		}
+	}
+};