Skip to content

Commit 7347266

Browse files
hassanbazzihassanbazzi
authored
Merge pull request #56 from rkostrzewski/feature/custom-config
feature: Custom config
2 parents 9a829d2 + 5d8c62c commit 7347266

File tree

18 files changed

+526
-17
lines changed

18 files changed

+526
-17
lines changed

‎README.md‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ $ preact build
6767
--prerender Pre-render static app content. [default: true]
6868
--clean Clear output directory before building. [default: true]
6969
--json Generate build statistics for analysis. [default: false]
70+
--config, -c Path to custom CLI config.
7071

7172
$ preact watch
7273

@@ -101,8 +102,6 @@ npm run serve -- --server config
101102

102103
### Custom Configuration
103104

104-
> **TL;DR** Currently in progress. See [#56](https://github.com/developit/preact-cli/pull/56)
105-
106105
#### Browserslist
107106

108107
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:
120119
}
121120
```
122121

122+
#### Babel
123+
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!
124+
125+
#### Webpack
126+
127+
To customize babel create ```preact.config.js``` file which exports function that will change webpack's config.
128+
129+
```
130+
/**
131+
* Function that mutates original webpack config.
132+
* Supports asynchronous changes when promise is returned.
133+
*
134+
* @param {object} config - original webpack config.
135+
* @param {object} env - options passed to CLI.
136+
* @param {WebpackConfigHelpers} helpers - object with useful helpers when working with config.
137+
**/
138+
export default function (config, env, helpers) {
139+
/** you can change config here **/
140+
}
141+
```
142+
See [WebpackConfigHelpers] docs for more info on ```helpers``` argument.
143+
123144

124145
[preact]: https://github.com/developit/preact
125146
[preact-router]: https://github.com/developit/preact-router
126147
[sw-precache]: https://github.com/GoogleChrome/sw-precache
127148
[proof]: https://googlechrome.github.io/lighthouse/viewer/?gist=142af6838482417af741d966e7804346
128149
[Service Workers]: https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
129150
[`async!`]: https://github.com/developit/preact-cli/blob/222e7018dd360e40f7db622191aeca62d6ef0c9a/examples/full/src/components/app.js#L7
151+
[```.babelrc```]: https://babeljs.io/docs/usage/babelrc/
152+
[Preact CLI preset]: https://github.com/developit/preact-cli/blob/master/src/lib/babel-config.js
153+
[WebpackConfigHelpers]: docs/webpack-helpers.md

‎docs/webpack-helpers.md‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
### Table of Contents
2+
3+
- [WebpackConfigHelpers](#webpackconfighelpers)
4+
- [webpack](#webpack)
5+
- [getLoaders](#getloaders)
6+
- [getRules](#getrules)
7+
- [getPlugins](#getplugins)
8+
- [getRulesByMatchingFile](#getrulesbymatchingfile)
9+
- [getLoadersByName](#getloadersbyname)
10+
- [getPluginsByName](#getpluginsbyname)
11+
- [getPluginsByType](#getpluginsbytype)
12+
- [setHtmlTemplate](#sethtmltemplate)
13+
- [PluginWrapper](#pluginwrapper)
14+
- [RuleWrapper](#rulewrapper)
15+
- [LoaderWrapper](#loaderwrapper)
16+
17+
## WebpackConfigHelpers
18+
19+
WebpackConfigHelpers
20+
21+
**Parameters**
22+
23+
- `cwd`
24+
25+
### webpack
26+
27+
Webpack module used to create config.
28+
29+
Returns **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)**
30+
31+
### getLoaders
32+
33+
Returns wrapper around all loaders from config.
34+
35+
**Parameters**
36+
37+
- `config` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack config](https://webpack.js.org/configuration/#options).
38+
39+
Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[LoaderWrapper](#loaderwrapper)>**
40+
41+
### getRules
42+
43+
Returns wrapper around all rules from config.
44+
45+
**Parameters**
46+
47+
- `config` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack config](https://webpack.js.org/configuration/#options).
48+
49+
Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[RuleWrapper](#rulewrapper)>**
50+
51+
### getPlugins
52+
53+
Returns wrapper around all plugins from config.
54+
55+
**Parameters**
56+
57+
- `config` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack config](https://webpack.js.org/configuration/#options).
58+
59+
Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[PluginWrapper](#pluginwrapper)>**
60+
61+
### getRulesByMatchingFile
62+
63+
**Parameters**
64+
65+
- `config` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack config](https://webpack.js.org/configuration/#options).
66+
- `file` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** path to test against loader. Resolved relatively to $PWD.
67+
68+
Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[RuleWrapper](#rulewrapper)>**
69+
70+
### getLoadersByName
71+
72+
Returns loaders that match provided name.
73+
74+
**Parameters**
75+
76+
- `config` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack config](https://webpack.js.org/configuration/#options).
77+
- `name` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** name of loader.
78+
79+
**Examples**
80+
81+
```javascript
82+
helpers.getLoadersByName(config, 'less-loader')
83+
```
84+
85+
Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[LoaderWrapper](#loaderwrapper)>**
86+
87+
### getPluginsByName
88+
89+
Returns plugins that match provided name.
90+
91+
**Parameters**
92+
93+
- `config` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack config](https://webpack.js.org/configuration/#options).
94+
- `name` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** name of loader.
95+
96+
**Examples**
97+
98+
```javascript
99+
helpers.getPluginsByName(config, 'HtmlWebpackPlugin')
100+
```
101+
102+
Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[PluginWrapper](#pluginwrapper)>**
103+
104+
### getPluginsByType
105+
106+
Returns plugins that match provided type.
107+
108+
**Parameters**
109+
110+
- `config` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack config](https://webpack.js.org/configuration/#options).
111+
- `type` **any** type of plugin.
112+
113+
**Examples**
114+
115+
```javascript
116+
helpers.getPluginsByType(config, webpack.optimize.CommonsChunkPlugin)
117+
```
118+
119+
Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[PluginWrapper](#pluginwrapper)>**
120+
121+
### setHtmlTemplate
122+
123+
Sets template used by HtmlWebpackPlugin.
124+
125+
**Parameters**
126+
127+
- `config` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack config](https://webpack.js.org/configuration/#options).
128+
- `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).
129+
130+
## PluginWrapper
131+
132+
Wrapper around webpack's [plugin](https://webpack.js.org/configuration/plugins/#plugins).
133+
134+
Type: [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
135+
136+
**Properties**
137+
138+
- `plugin` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [plugin entry](https://webpack.js.org/configuration/plugins/#plugins).
139+
- `index` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** index of plugin in config.
140+
141+
## RuleWrapper
142+
143+
Wrapper around webpack's [rule](https://webpack.js.org/configuration/module/#module-rules).
144+
145+
Type: [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
146+
147+
**Properties**
148+
149+
- `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).
150+
- `index` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** index of rule in config.
151+
152+
## LoaderWrapper
153+
154+
Wrapper around webpack's [loader entry](https://webpack.js.org/configuration/module/#useentry).
155+
156+
Type: [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
157+
158+
**Properties**
159+
160+
- `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).
161+
- `ruleIndex` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** index of rule in config.
162+
- `loader` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [loader entry](https://webpack.js.org/configuration/module/#useentry).
163+
- `loaderIndex` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** index of loader in rule.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@
8080
"html-looks-like": "^1.0.2",
8181
"html-webpack-exclude-assets-plugin": "0.0.5",
8282
"lodash": "^4.17.4",
83+
"ncp": "^2.0.0",
8384
"tap-diff": "^0.1.1",
8485
"tape": "^4.6.3",
8586
"uuid": "^3.0.1"

‎src/commands/build.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import promisify from 'es6-promisify';
33
import rimraf from 'rimraf';
44
import asyncCommand from '../lib/async-command';
55
import webpackConfig from '../lib/webpack-config';
6+
import transformConfig from '../lib/transform-config';
67
import runWebpack, { showStats, writeJsonStats } from '../lib/run-webpack';
78

89
export default asyncCommand({
@@ -38,11 +39,16 @@ export default asyncCommand({
3839
},
3940
template: {
4041
description: 'HTML template used by webpack'
42+
},
43+
config: {
44+
description: 'Path to custom CLI config.',
45+
alias: 'c'
4146
}
4247
},
4348

4449
async handler(argv) {
4550
let config = webpackConfig(argv);
51+
await transformConfig(argv, config);
4652

4753
if (argv.clean) {
4854
let dest = resolve(argv.cwd || process.cwd(), argv.dest || 'build');

‎src/commands/watch.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import asyncCommand from '../lib/async-command';
22
import webpackConfig from '../lib/webpack-config';
3+
import transformConfig from '../lib/transform-config';
34
import getSslCert from '../lib/ssl-cert';
45
import runWebpack, { showStats } from '../lib/run-webpack';
56

@@ -34,6 +35,10 @@ export default asyncCommand({
3435
},
3536
template: {
3637
description: 'HTML template used by webpack'
38+
},
39+
config: {
40+
description: 'Path to custom preact.config.js',
41+
alias: 'c'
3742
}
3843
},
3944

@@ -50,6 +55,7 @@ export default asyncCommand({
5055
}
5156

5257
let config = webpackConfig(argv);
58+
await transformConfig(argv, config);
5359

5460
let stats = await runWebpack(true, config, showStats);
5561
showStats(stats);

‎src/lib/babel-config.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
export default (env, options={}) => ({
2-
babelrc: false,
32
presets: [
43
[require.resolve('babel-preset-env'), {
54
loose: true,

‎src/lib/run-webpack.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default (watch=false, config, onprogress) => new Promise( (resolve, rejec
2525
if (first) {
2626
first = false;
2727
let devServer = config.devServer;
28-
let serverAddr = `${config.https?'https':'http'}://${process.env.HOST || devServer.host || 'localhost'}:${process.env.PORT || devServer.port || 8080}`;
28+
let serverAddr = `${devServer.https?'https':'http'}://${process.env.HOST || devServer.host || 'localhost'}:${process.env.PORT || devServer.port || 8080}`;
2929
process.stdout.write(` \u001b[32m> Development server started at ${serverAddr}\u001b[39m\n`);
3030
}
3131
if (onprogress) onprogress(stats);

0 commit comments

Comments
 (0)