all webpack variants now help 'in house '

build/app/webpack.js

@@ -4,6 +4,7 @@ const fs = require('fs');
 const join = require('path').join;
 const Wrap = require('../lib/addons/wrap');
 const headCss = require('../lib/head-css')
+const hashedAssets = require('../lib/hashed-assets')
 
 const gitignore = fs.readFileSync(join(process.cwd(), '.gitignore'), 'utf8')
 	.split('\n');
@@ -39,38 +40,39 @@ function filterEntryKeys (obj, rx, negativeMatch) {
 	}, {})
 }
 
-function constructVariants (nWebpackOptions) {
-	noGitignoreWildCard();
-
-	// we no longer build a main.js for the app when generating the standard asset variants
-	const variants = [
-		// all entry points excluding main.js generated as normal
-		headCss(nWebpack(Object.assign({}, nWebpackOptions, {
-			entry: filterEntryKeys(nWebpackOptions.entry, /main\.js$/, true)
-		})))
-	]
-
-	// new entry point for main.js declaring external n-ui
-	const mainJs = nWebpack(Object.assign(clone(nWebpackOptions), {
-		language: 'js',
-		entry: modifyEntryKeys(nWebpackOptions.entry, /main\.js$/, name => name.replace(/\.js$/,'-without-n-ui.js'))
-	})))
-
-	const nUiEntry = path.join(process.cwd(), 'bower_components/n-ui/_entry');
-	const nUiEntryPoints = require(nUiEntry)(options.nUiExcludes)
-	mainJs.externals = Object.assign({}, mainJs.externals, nUiEntryPoints);
-	mainJs.plugins.push(
-		new Wrap(
-			'(function(){function init(){\n',
-			'\n};window.ftNextnUiLoaded ? init() : document.addEventListener ? document.addEventListener(\'ftNextnUiLoaded\', init) : document.attachEvent(\'onftNextnUiLoaded\', init);})();',
-			{ match: /\.js$/ }
-		)
-	);
-
-	variants.push(mainJs);
-
-	if (process.env.NEXT_APP_SHELL === 'local') {
-		const nWebpackWarning = `
+const baseConfig = require(path.join(process.cwd(), 'n-ui-build.config.js'));
+
+noGitignoreWildcard();
+
+// we no longer build a main.js for the app when generating the standard asset variants
+const variants = [
+	// all entry points excluding main.js generated as normal
+	hashedAssets(headCss(nWebpack(Object.assign({}, baseConfig, {
+		entry: filterEntryKeys(baseConfig.entry, /main\.js$/, true)
+	}))))
+]
+
+// new entry point for main.js declaring external n-ui
+const mainJs = nWebpack(Object.assign(clone(baseConfig), {
+	language: 'js',
+	entry: modifyEntryKeys(baseConfig.entry, /main\.js$/, name => name.replace(/\.js$/,'-without-n-ui.js'))
+}))
+
+const nUiEntry = path.join(process.cwd(), 'bower_components/n-ui/_entry');
+const nUiEntryPoints = require(nUiEntry)(baseConfig.nUiExcludes)
+mainJs.externals = Object.assign({}, mainJs.externals, nUiEntryPoints);
+mainJs.plugins.push(
+	new Wrap(
+		'(function(){function init(){\n',
+		'\n};window.ftNextnUiLoaded ? init() : document.addEventListener ? document.addEventListener(\'ftNextnUiLoaded\', init) : document.attachEvent(\'onftNextnUiLoaded\', init);})();',
+		{ match: /\.js$/ }
+	)
+);
+
+variants.push(hashedAssets(mainJs));
+
+if (process.env.NEXT_APP_SHELL === 'local') {
+	const nWebpackWarning = `
 /*********** n-webpack warning ************/
 
 You have set the environment variable NEXT_APP_SHELL=local
@@ -80,44 +82,36 @@ or similar). It will slow down your build A LOT!!!!
 
 If you do not need this behaviour run
 
-		unset NEXT_APP_SHELL
+	unset NEXT_APP_SHELL
 
 /*********** n-webpack warning ************/
 `;
-		console.warn(nWebpackWarning); // eslint-disable-line no-console
+	console.warn(nWebpackWarning); // eslint-disable-line no-console
 
-		const ignoresNUi = fs.readFileSync(path.join(process.cwd(), '.gitignore'), 'utf8')
-			.split('\n')
-			.some(line => line === '/public/n-ui/');
-
-		if (!ignoresNUi) {
-			throw 'Add /public/n-ui/ to your .gitignore to start building a local app shell';
-		}
+	const ignoresNUi = fs.readFileSync(path.join(process.cwd(), '.gitignore'), 'utf8')
+		.split('\n')
+		.some(line => line === '/public/n-ui/');
 
-		const appShellBuild = Object.assign(clone(nWebpackOptions), {
-			language: 'js',
-			env: 'dev',
-			withBabelPolyfills: false,
-			output: {
-				filename: '[name]',
-				library: 'ftNextUi',
-				devtoolModuleFilenameTemplate: 'n-ui//[resource-path]?[loaders]'
-			},
-			entry: {
-				'./public/n-ui/es5.js': './bower_components/n-ui/build/deploy/wrapper.js'
-			},
-			exclude: [/node_modules/]
-		});
-
-		variants.push(nWebpack(appShellBuild));
+	if (!ignoresNUi) {
+		throw 'Add /public/n-ui/ to your .gitignore to start building a local app shell';
 	}
-	// can't just variants.map(nWebpack) becaue second param truthiness
-	return variants
-}
 
-const baseConfig = Object.assign({}, {
-	withHeadCss: true,
-	withHashedAssets: true
-}, require(path.join(process.cwd(), 'n-ui-build.config.js')));
+	const appShellBuild = Object.assign(clone(baseConfig), {
+		language: 'js',
+		env: 'dev',
+		withBabelPolyfills: false,
+		output: {
+			filename: '[name]',
+			library: 'ftNextUi',
+			devtoolModuleFilenameTemplate: 'n-ui//[resource-path]?[loaders]'
+		},
+		entry: {
+			'./public/n-ui/es5.js': './bower_components/n-ui/build/deploy/wrapper.js'
+		},
+		exclude: [/node_modules/]
+	});
+
+	variants.push(nWebpack(appShellBuild));
+}
 
-module.exports = constructVariants(baseConfig);
+module.exports = variants

build/deploy/webpack.config.js

@@ -1,5 +1,6 @@
 'use strict';
 const nWebpack = require('@financial-times/n-webpack');
+const headCss = require('../lib/head-css')
 
 const coreConfig = {
 	output: {
@@ -11,9 +12,7 @@ const coreConfig = {
 	exclude: [/node_modules/]
 };
 
-// Build variants of the bundle that work with different combinations of feature flags
-// Only build some of them when bower linking in dev to save build time
-module.exports = [
+const configs = [
 	{
 		withBabelPolyfills: false,
 		env: 'dev',
@@ -22,23 +21,32 @@ module.exports = [
 		},
 		buildInDev: true
 	},
-	{
-		withBabelPolyfills: false,
-		env: 'prod',
-		entry: {
-			'./dist/assets/es5.min.js': './build/deploy/wrapper.js'
-		}
-	},
 	{
 		withBabelPolyfills: false,
 		env: 'prod',
 		entry: {
 			'./dist/assets/n-ui-core.css': './build/deploy/shared-head.scss'
 		},
 		withHeadCss: true,
-		wrap: undefined,
 		buildInDev: true
 	}
-]
-.filter(conf => conf.buildInDev || !process.env.DEV_BUILD)
-.map(conf => nWebpack(Object.assign({}, coreConfig, conf)));
+];
+
+if (!process.env.DEV_BUILD) {
+	configs.push({
+		withBabelPolyfills: false,
+		env: 'prod',
+		entry: {
+			'./dist/assets/es5.min.js': './build/deploy/wrapper.js'
+		}
+	})
+}
+
+module.exports = configs
+	.map(conf => {
+		const webpackConf = nWebpack(Object.assign({}, coreConfig, conf));
+		if (conf.withHeadCss) {
+			return headCss(webpackConf)
+		}
+		return webpackConf
+	})

build/lib/hashed-assets.js

@@ -0,0 +1,8 @@
+const AssetHashes = require('./addons/asset-hashes');
+
+module.exports = function (config) {
+	if (config.isProd) {
+		config.plugins.push(new AssetHashes());
+	}
+	return config;
+}

demo/webpack.config.js

@@ -15,6 +15,4 @@ const webpackConfig = headCss(nWebpack({
 	exclude: [/node_modules/]
 }));
 
-console.log(JSON.stringify(webpackConfig, null, 2))
-
 module.exports = webpackConfig;

package.json

@@ -22,6 +22,7 @@
   "homepage": "https://github.com/Financial-Times/n-ui#readme",
   "devDependencies": {
     "@financial-times/n-heroku-tools": "^6.19.0",
+    "@financial-times/n-webpack": "^3.0.0-beta.1",
     "bower": "^1.7.9",
     "bower-webpack-plugin": "^0.1.9",
     "brotli": "^1.3.1",