Extract webpack config

gulpfile.ts

@@ -11,7 +11,6 @@ import * as ts from 'gulp-typescript';
 import * as tslint from 'gulp-tslint';
 import * as glob from 'glob';
 import * as es from 'event-stream';
-import * as Webpack from 'webpack';
 import * as webpack from 'webpack-stream';
 import stylus = require('gulp-stylus');
 import cssnano = require('gulp-cssnano');
@@ -156,93 +155,7 @@ gulp.task('build:client:scripts', () => new Promise(async (ok) => {
 	// Get commit info
 	const commit = await prominence(git).getLastCommit();
 
-	const StringReplacePlugin = require('string-replace-webpack-plugin');
+	let stream = webpack(require('./webpack.config.js')(config, commit, env), require('webpack'));
-
-	/* webpack options */
-	const pack: Webpack.Configuration = {
-		entry: {
-			'client': './src/web/app/client/script.js',
-			'desktop': './src/web/app/desktop/script.js',
-			'mobile': './src/web/app/mobile/script.js',
-			'dev': './src/web/app/dev/script.js',
-			'auth': './src/web/app/auth/script.js'
-		},
-		module: {
-			rules: [
-				{
-					enforce: 'pre',
-					test: /\.tag$/,
-					exclude: /node_modules/,
-					loader: StringReplacePlugin.replace({
-						replacements: [
-							{ pattern: /\$theme\-color\-foreground/g, replacement: () => '#fff' },
-							{ pattern: /\$theme\-color/g, replacement: () => config.themeColor },
-						]
-					})
-				},
-				{
-					test: /\.tag$/,
-					exclude: /node_modules/,
-					loader: 'riot-tag-loader',
-					query: {
-						hot: false,
-						type: 'livescript',
-						style: 'stylus',
-						expr: false,
-						compact: true,
-						parserOptions: {
-							style: {
-								compress: true
-							}
-						}
-					}
-				},
-				{
-					test: /\.styl$/,
-					exclude: /node_modules/,
-					use: [
-						{
-							loader: 'style-loader'
-						},
-						{
-							loader: 'css-loader'
-						},
-						{
-							loader: 'stylus-loader'
-						}
-					]
-				}
-			]
-		},
-		plugins: [
-			new Webpack.DefinePlugin({
-				VERSION: JSON.stringify(commit ? commit.hash : null),
-				CONFIG: {
-					themeColor: JSON.stringify(config.themeColor),
-					apiUrl: JSON.stringify(config.api_url),
-					aboutUrl: JSON.stringify(config.about_url),
-					devUrl: JSON.stringify(config.dev_url),
-					host: JSON.stringify(config.host),
-					url: JSON.stringify(config.url),
-					recaptcha: {
-						siteKey: JSON.stringify(config.recaptcha.siteKey),
-					}
-				}
-			}),
-			new StringReplacePlugin(),
-		],
-		output: {
-			filename: '[name]/script.js'
-		}
-	};
-
-	if (isProduction) {
-		// TODO.
-		// see https://github.com/webpack/webpack/issues/2545
-		//pack.plugins.push(new Webpack.optimize.UglifyJsPlugin())
-	}
-
-	let stream = webpack(pack, Webpack);
 
 	// TODO: remove this block
 	if (isProduction) {

webpack.config.js

@@ -0,0 +1 @@
+eval(require('typescript').transpile(require('fs').readFileSync('./webpack.config.ts').toString()));

webpack.config.ts

@@ -0,0 +1,92 @@
+import * as webpack from 'webpack';
+const StringReplacePlugin = require('string-replace-webpack-plugin');
+
+module.exports = (config, commit, env) => {
+	const isProduction = env === 'production';
+	const isDebug = !isProduction;
+
+	const pack: webpack.Configuration = {
+		entry: {
+			'client': './src/web/app/client/script.js',
+			'desktop': './src/web/app/desktop/script.js',
+			'mobile': './src/web/app/mobile/script.js',
+			'dev': './src/web/app/dev/script.js',
+			'auth': './src/web/app/auth/script.js'
+		},
+		module: {
+			rules: [
+				{
+					enforce: 'pre',
+					test: /\.tag$/,
+					exclude: /node_modules/,
+					loader: StringReplacePlugin.replace({
+						replacements: [
+							{ pattern: /\$theme\-color\-foreground/g, replacement: () => '#fff' },
+							{ pattern: /\$theme\-color/g, replacement: () => config.themeColor },
+						]
+					})
+				},
+				{
+					test: /\.tag$/,
+					exclude: /node_modules/,
+					loader: 'riot-tag-loader',
+					query: {
+						hot: false,
+						type: 'livescript',
+						style: 'stylus',
+						expr: false,
+						compact: true,
+						parserOptions: {
+							style: {
+								compress: true
+							}
+						}
+					}
+				},
+				{
+					test: /\.styl$/,
+					exclude: /node_modules/,
+					use: [
+						{
+							loader: 'style-loader'
+						},
+						{
+							loader: 'css-loader'
+						},
+						{
+							loader: 'stylus-loader'
+						}
+					]
+				}
+			]
+		},
+		plugins: [
+			new webpack.DefinePlugin({
+				VERSION: JSON.stringify(commit ? commit.hash : null),
+				CONFIG: {
+					themeColor: JSON.stringify(config.themeColor),
+					apiUrl: JSON.stringify(config.api_url),
+					aboutUrl: JSON.stringify(config.about_url),
+					devUrl: JSON.stringify(config.dev_url),
+					host: JSON.stringify(config.host),
+					url: JSON.stringify(config.url),
+					recaptcha: {
+						siteKey: JSON.stringify(config.recaptcha.siteKey),
+					}
+				}
+			}),
+			new StringReplacePlugin(),
+		],
+		output: {
+			filename: '[name]/script.js'
+		}
+	};
+
+	if (isProduction) {
+		// TODO.
+		// see https://github.com/webpack/webpack/issues/2545
+		//pack.plugins.push(new Webpack.optimize.UglifyJsPlugin())
+	}
+
+	return pack;
+};