feature: Custom config

README.md

@@ -67,6 +67,7 @@ $ preact build
   --prerender       Pre-render static app content.                [default: true]
   --clean           Clear output directory before building.       [default: true]
   --json            Generate build statistics for analysis.       [default: false]
+  --config, -c      Path to custom CLI config.
 
 $ preact watch
 
@@ -101,8 +102,6 @@ npm run serve -- --server config
 
 ### Custom Configuration
 
-> **TL;DR** Currently in progress. See [#56](https://github.com/developit/preact-cli/pull/56)
-
 #### Browserslist
 
 You may customize your list of supported browser versions by declaring a [`"browserslist"`](https://github.com/ai/browserslist) key within your `package.json`. Changing these values will modify your JavaScript (via [`babel-preset-env`](https://github.com/babel/babel-preset-env#targetsbrowsers)) and your CSS (via [`autoprefixer`](https://github.com/postcss/autoprefixer)) output.
@@ -120,10 +119,35 @@ By default, `preact-cli` emulates the following config:
 }
 ```
 
+#### Babel
+To customize babel simply create [```.babelrc```](https://babeljs.io/docs/usage/babelrc/) file. [Preact CLI preset] will be applied automatically so you won't have to worry about keeping your ```.babelrc``` updated!
+
+#### Webpack
+
+To customize babel create ```preact.config.js``` file which exports function that will change webpack's config.
+
+```
+/**
+ * Function that mutates original webpack config.
+ * Supports asynchronous changes when promise is returned. 
+ * 
+ * @param {object} config - original webpack config.
+ * @param {object} env - options passed to CLI.
+ * @param {WebpackConfigHelpers} helpers - object with useful helpers when working with config.
+ **/
+export default function (config, env, helpers) {
+	/** you can change config here **/
+}
+```
+See [WebpackConfigHelpers] docs for more info on ```helpers``` argument.
+
 
 [preact]: https://github.com/developit/preact
 [preact-router]: https://github.com/developit/preact-router
 [sw-precache]: https://github.com/GoogleChrome/sw-precache
 [proof]: https://googlechrome.github.io/lighthouse/viewer/?gist=142af6838482417af741d966e7804346
 [Service Workers]: https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
 [`async!`]: https://github.com/developit/preact-cli/blob/222e7018dd360e40f7db622191aeca62d6ef0c9a/examples/full/src/components/app.js#L7
+[```.babelrc```]: https://babeljs.io/docs/usage/babelrc/
+[Preact CLI preset]: https://github.com/developit/preact-cli/blob/master/src/lib/babel-config.js
+[WebpackConfigHelpers]: docs/webpack-helpers.md

docs/webpack-helpers.md

@@ -0,0 +1,163 @@
+### Table of Contents
+
+-   [WebpackConfigHelpers](#webpackconfighelpers)
+    -   [webpack](#webpack)
+    -   [getLoaders](#getloaders)
+    -   [getRules](#getrules)
+    -   [getPlugins](#getplugins)
+    -   [getRulesByMatchingFile](#getrulesbymatchingfile)
+    -   [getLoadersByName](#getloadersbyname)
+    -   [getPluginsByName](#getpluginsbyname)
+    -   [getPluginsByType](#getpluginsbytype)
+    -   [setHtmlTemplate](#sethtmltemplate)
+-   [PluginWrapper](#pluginwrapper)
+-   [RuleWrapper](#rulewrapper)
+-   [LoaderWrapper](#loaderwrapper)
+
+## WebpackConfigHelpers
+
+WebpackConfigHelpers
+
+**Parameters**
+
+-   `cwd`  
+
+### webpack
+
+Webpack module used to create config.
+
+Returns **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** 
+
+### getLoaders
+
+Returns wrapper around all loaders from config.
+
+**Parameters**
+
+-   `config` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack config](https://webpack.js.org/configuration/#options).
+
+Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[LoaderWrapper](#loaderwrapper)>** 
+
+### getRules
+
+Returns wrapper around all rules from config.
+
+**Parameters**
+
+-   `config` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack config](https://webpack.js.org/configuration/#options).
+
+Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[RuleWrapper](#rulewrapper)>** 
+
+### getPlugins
+
+Returns wrapper around all plugins from config.
+
+**Parameters**
+
+-   `config` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack config](https://webpack.js.org/configuration/#options).
+
+Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[PluginWrapper](#pluginwrapper)>** 
+
+### getRulesByMatchingFile
+
+**Parameters**
+
+-   `config` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack config](https://webpack.js.org/configuration/#options).
+-   `file` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** path to test against loader. Resolved relatively to $PWD.
+
+Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[RuleWrapper](#rulewrapper)>** 
+
+### getLoadersByName
+
+Returns loaders that match provided name.
+
+**Parameters**
+
+-   `config` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack config](https://webpack.js.org/configuration/#options).
+-   `name` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** name of loader.
+
+**Examples**
+
+```javascript
+helpers.getLoadersByName(config, 'less-loader')
+```
+
+Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[LoaderWrapper](#loaderwrapper)>** 
+
+### getPluginsByName
+
+Returns plugins that match provided name.
+
+**Parameters**
+
+-   `config` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack config](https://webpack.js.org/configuration/#options).
+-   `name` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** name of loader.
+
+**Examples**
+
+```javascript
+helpers.getPluginsByName(config, 'HtmlWebpackPlugin')
+```
+
+Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[PluginWrapper](#pluginwrapper)>** 
+
+### getPluginsByType
+
+Returns plugins that match provided type.
+
+**Parameters**
+
+-   `config` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack config](https://webpack.js.org/configuration/#options).
+-   `type` **any** type of plugin.
+
+**Examples**
+
+```javascript
+helpers.getPluginsByType(config, webpack.optimize.CommonsChunkPlugin)
+```
+
+Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[PluginWrapper](#pluginwrapper)>** 
+
+### setHtmlTemplate
+
+Sets template used by HtmlWebpackPlugin.
+
+**Parameters**
+
+-   `config` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack config](https://webpack.js.org/configuration/#options).
+-   `template` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** template path. See [HtmlWebpackPlugin docs](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md).
+
+## PluginWrapper
+
+Wrapper around webpack's [plugin](https://webpack.js.org/configuration/plugins/#plugins).
+
+Type: [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
+
+**Properties**
+
+-   `plugin` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [plugin entry](https://webpack.js.org/configuration/plugins/#plugins).
+-   `index` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** index of plugin in config.
+
+## RuleWrapper
+
+Wrapper around webpack's [rule](https://webpack.js.org/configuration/module/#module-rules).
+
+Type: [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
+
+**Properties**
+
+-   `rule` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [rule entry](https://webpack.js.org/configuration/module/#module-rules).
+-   `index` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** index of rule in config.
+
+## LoaderWrapper
+
+Wrapper around webpack's [loader entry](https://webpack.js.org/configuration/module/#useentry).
+
+Type: [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
+
+**Properties**
+
+-   `rule` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [rule entry](https://webpack.js.org/configuration/module/#module-rules).
+-   `ruleIndex` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** index of rule in config.
+-   `loader` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [loader entry](https://webpack.js.org/configuration/module/#useentry).
+-   `loaderIndex` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** index of loader in rule.

package.json

@@ -80,6 +80,7 @@
     "html-looks-like": "^1.0.2",
     "html-webpack-exclude-assets-plugin": "0.0.5",
     "lodash": "^4.17.4",
+    "ncp": "^2.0.0",
     "tap-diff": "^0.1.1",
     "tape": "^4.6.3",
     "uuid": "^3.0.1"

src/commands/build.js

@@ -3,6 +3,7 @@ import promisify from 'es6-promisify';
 import rimraf from 'rimraf';
 import asyncCommand from '../lib/async-command';
 import webpackConfig from '../lib/webpack-config';
+import transformConfig from '../lib/transform-config';
 import runWebpack, { showStats, writeJsonStats } from '../lib/run-webpack';
 
 export default asyncCommand({
@@ -38,11 +39,16 @@ export default asyncCommand({
 		},
 		template: {
 			description: 'HTML template used by webpack'
+		},
+		config: {
+			description: 'Path to custom CLI config.',
+			alias: 'c'
 		}
 	},
 
 	async handler(argv) {
 		let config = webpackConfig(argv);
+		await transformConfig(argv, config);
 
 		if (argv.clean) {
 			let dest = resolve(argv.cwd || process.cwd(), argv.dest || 'build');

src/commands/watch.js

@@ -1,5 +1,6 @@
 import asyncCommand from '../lib/async-command';
 import webpackConfig from '../lib/webpack-config';
+import transformConfig from '../lib/transform-config';
 import getSslCert from '../lib/ssl-cert';
 import runWebpack, { showStats } from '../lib/run-webpack';
 
@@ -34,6 +35,10 @@ export default asyncCommand({
 		},
 		template: {
 			description: 'HTML template used by webpack'
+		},
+		config: {
+			description: 'Path to custom preact.config.js',
+			alias: 'c'
 		}
 	},
 
@@ -50,6 +55,7 @@ export default asyncCommand({
 		}
 
 		let config = webpackConfig(argv);
+		await transformConfig(argv, config);
 
 		let stats = await runWebpack(true, config, showStats);
 		showStats(stats);

src/lib/babel-config.js

@@ -1,5 +1,4 @@
 export default (env, options={}) => ({
-	babelrc: false,
 	presets: [
 		[require.resolve('babel-preset-env'), {
 			loose: true,

src/lib/run-webpack.js

@@ -25,7 +25,7 @@ export default (watch=false, config, onprogress) => new Promise( (resolve, rejec
 			if (first) {
 				first = false;
 				let devServer = config.devServer;
-				let serverAddr = `${config.https?'https':'http'}://${process.env.HOST || devServer.host || 'localhost'}:${process.env.PORT || devServer.port || 8080}`;
+				let serverAddr = `${devServer.https?'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`);
 			}
 			if (onprogress) onprogress(stats);