feature: Prerender using webpack

src/commands/build.js

@@ -46,11 +46,11 @@ export default asyncCommand({
 			await promisify(rimraf)(dest);
 		}
 
-		let stats = await runWebpack(false, config);
+		let stats = await runWebpack(false, argv, config);
 		showStats(stats);
 
 		if (argv.json) {
-			await writeJsonStats(stats)
+			await writeJsonStats(stats);
 		}
 	}
 });

src/lib/prerender.js

@@ -1,38 +1,14 @@
 import { resolve } from 'path';
-import createBabelConfig from './babel-config';
 
-export default function prerender(config, params) {
+export default function prerender(outputFilename, params) {
 	params = params || {};
 
-	let entry = resolve(config.cwd, config.src || 'src', 'index.js'),
+	let entry = resolve(__dirname, './ssr-build', outputFilename),
 		url = params.url || '/';
 
-	require('babel-register')({
-		babelrc: false,
-		...createBabelConfig(config, { modules: 'commonjs' })
-	});
-
 	global.location = { href:url, pathname:url };
 	global.history = {};
 
-	// install CSS modules (just to generate correct classNames and support importing CSS & LESS)
-	require('css-modules-require-hook')({
-		rootDir: resolve(config.cwd, config.src || 'src'),
-		generateScopedName: '[local]__[hash:base64:5]',
-		extensions: ['.less', '.css'],
-		processorOpts: { parser: require('postcss-less').parse }
-	});
-
-	// strip webpack loaders from import names
-	let { Module } = require('module');
-	let oldResolve = Module._resolveFilename;
-	Module._resolveFilename = function (request, parent, isMain) {
-		request = request.replace(/^.*\!/g, '');
-		return oldResolve.call(this, request, parent, isMain);
-	};
-
-	require('./polyfills');
-
 	let m = require(entry),
 		app = m && m.default || m;
 
@@ -47,8 +23,5 @@ export default function prerender(config, params) {
 
 	let html = renderToString(preact.h(app, { url }));
 
-	// restore resolution without loader stripping
-	Module._resolveFilename = oldResolve;
-
 	return html;
 }

src/lib/run-webpack.js

@@ -1,28 +1,27 @@
-import { resolve } from 'path';
+import path from 'path';
+import rimraf from 'rimraf';
 import fs from 'fs.promised';
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import chalk from 'chalk';
 
-export default (watch=false, config, onprogress) => new Promise( (resolve, reject) => {
-	let compiler = webpack(config);
-
-	let done = (err, stats) => {
-		if (err) reject(err);
-		else {
-			// Timeout for plugins that work on `after-emit` event of webpack
-			setTimeout(()=>{
-				resolve(stats);
-			},20);
-		}
-	};
-
+export default (watch=false, env, config, onprogress) => {
 	if (watch) {
+		return devBuild(config, onprogress);
+	}
+	else {
+		return prodBuild(env, config);
+	}
+};
+
+const devBuild = (config, onprogress) => {
+	let compiler = webpack(config);
+	return new Promise((resolve, reject) => {
 		let first = true;
 		compiler.plugin('done', stats => {
 			if (first) {
 				first = false;
-				let devServer = config.devServer
+				let devServer = config.devServer;
 				let serverAddr = `${devServer.https===true?'https':'http'}://${process.env.HOST || devServer.host || 'localhost'}:${process.env.PORT || devServer.port || 8080}`;
 				process.stdout.write(`  \u001b[32m> Development server started at ${serverAddr}\u001b[39m\n`);
 			}
@@ -32,11 +31,56 @@ export default (watch=false, config, onprogress) => new Promise( (resolve, rejec
 
 		let server = new WebpackDevServer(compiler, config.devServer);
 		server.listen(config.devServer.port);
-	}
-	else {
-		compiler.run(done);
-	}
-});
+	});
+};
+
+const prodBuild = (env, config) => {
+	let ssrOutputPath = path.resolve(__dirname, 'ssr-build/');
+	let ssrConfig = (config) => {
+		let newConfig = Object.assign({}, config, {
+			target: 'node',
+			entry: path.resolve(env.cwd, env.src || 'src', 'index.js'),
+			plugins: config.plugins.filter(c => !(c.constructor && c.constructor.name === 'HtmlWebpackPlugin')),
+		});
+
+		newConfig.output.path = ssrOutputPath;
+		newConfig.output.libraryTarget = 'commonjs2';
+
+		let asyncLoaderIndex = newConfig.module.loaders
+			.findIndex(l => l.loader === path.resolve(__dirname, 'async-component-loader'));
+
+		// Remove async loader in prerender because all chunks are available.
+		if (asyncLoaderIndex > -1) {
+			newConfig.module.loaders.splice(asyncLoaderIndex, 1);
+		}
+
+		return newConfig;
+	};
+	let compiler = webpack(config);
+	let runCompiler = () => new Promise((resolve, reject) => {
+		console.log('Running production build...');
+		compiler.run((err, stats) => {
+			if (err) reject(err);
+			else {
+				// Timeout for plugins that work on `after-emit` event of webpack
+				setTimeout(()=>	resolve(stats), 20);
+			}
+		});
+	});
+
+	let ssrCompiler = webpack(ssrConfig(config));
+	let runSsrCompiler = () => new Promise((resolve, reject) => {
+		console.log('Running SSR build...');
+		rimraf.sync(ssrOutputPath);
+		ssrCompiler.run((err) => {
+			if (err) return reject(err);
+			// Timeout for plugins that work on `after-emit` event of webpack
+			setTimeout(()=>	resolve(), 20);
+		});
+	});
+
+	return env.prerender ? runSsrCompiler().then(runCompiler) : runCompiler();
+};
 
 export function showStats(stats) {
 	let info = stats.toJson();
@@ -57,39 +101,39 @@ export function showStats(stats) {
 }
 
 export function writeJsonStats(stats) {
-	const outputPath = resolve(process.cwd(), 'stats.json')
+	const outputPath = path.resolve(process.cwd(), 'stats.json');
 	const jsonStats = stats.toJson({
 		json: true,
 		chunkModules: true,
 		source: false,
-	})
+	});
 
-	jsonStats.modules.forEach(normalizeModule)
-	jsonStats.chunks.forEach(c => c.modules.forEach(normalizeModule))
+	jsonStats.modules.forEach(normalizeModule);
+	jsonStats.chunks.forEach(c => c.modules.forEach(normalizeModule));
 
 	return fs.writeFile(outputPath, JSON.stringify(jsonStats))
 		.then(() => {
-			process.stdout.write('\nWebpack output stats generated.\n\n')
-			process.stdout.write('You can upload your stats.json to:\n')
-			process.stdout.write('- https://chrisbateman.github.io/webpack-visualizer/\n')
-			process.stdout.write('- https://webpack.github.io/analyse/\n')
-		})
+			process.stdout.write('\nWebpack output stats generated.\n\n');
+			process.stdout.write('You can upload your stats.json to:\n');
+			process.stdout.write('- https://chrisbateman.github.io/webpack-visualizer/\n');
+			process.stdout.write('- https://webpack.github.io/analyse/\n');
+		});
 }
 
 const normalizeModule = m => {
-	const keysToNormalize = ['identifier', 'name', 'module', 'moduleName', 'moduleIdentifier']
+	const keysToNormalize = ['identifier', 'name', 'module', 'moduleName', 'moduleIdentifier'];
 
 	keysToNormalize.forEach(key => {
-		if(key in m) {
-			m[key] = normalizeName(m[key])
+		if (key in m) {
+			m[key] = normalizeName(m[key]);
 		}
-	})
+	});
 
 	if (m.reasons) {
-		m.reasons.forEach(normalizeModule)
+		m.reasons.forEach(normalizeModule);
 	}
 
-	return m
-}
+	return m;
+};
 
-const normalizeName = p => p.substr(p.lastIndexOf('!') + 1)
+const normalizeName = p => p.substr(p.lastIndexOf('!') + 1);

src/lib/webpack-config.js

@@ -56,14 +56,15 @@ export default env => {
 
 	env.pkg = readJson(resolve(cwd, 'package.json')) || {};
 	env.manifest = readJson(src('manifest.json')) || {};
+	env.outputFilename = 'bundle.js';
 
 	return createConfig.vanilla([
 		setContext(src('.')),
 		entryPoint(resolve(__dirname, './entry')),
 		setOutput({
 			path: resolve(cwd, env.dest || 'build'),
 			publicPath: '/',
-			filename: 'bundle.js',
+			filename: env.outputFilename,
 			chunkFilename: '[name].chunk.[chunkhash:5].js'
 		}),
 
@@ -455,7 +456,7 @@ const htmlPlugin = config => addPlugins([
 		title: config.title || config.manifest.name || config.manifest.short_name || (config.pkg.name || '').replace(/^@[a-z]\//, '') || 'Preact App',
 		config,
 		ssr(params) {
-			return config.prerender ? prerender(config, params) : '';
+			return config.prerender ? prerender(config.outputFilename, params) : '';
 		}
 	}),