Skip to content

Commit 0f657d0

Browse files
committed
docs(scaffolding): improve description & formatting
1 parent e11c524 commit 0f657d0

File tree

1 file changed

+33
-40
lines changed

1 file changed

+33
-40
lines changed

SCAFFOLDING.md

Lines changed: 33 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -60,35 +60,34 @@ webpack-cli init webpack-scaffold-yourpackage
6060

6161
## API
6262

63-
To create a `scaffold`, you must create a [`yeoman-generator`](http://yeoman.io/authoring/). Because of that, you can optionally extend your generator to include methods from the [Yeoman API](http://yeoman.io/learning/). Its worth noting that we support all the properties of a regular webpack configuration. In order for us to do this, there's a thing you need to remember.
63+
To create a `scaffold`, you must create a [`yeoman-generator`](http://yeoman.io/authoring/). Because of that, you can optionally extend your generator to include methods from the [Yeoman API](http://yeoman.io/learning/). It's worth noting that we support all the properties of a regular webpack configuration. In order for us to do this, there's a thing you need to remember:
6464

65-
Objects are made using strings, while strings are made using double strings. This means that in order for you to create a string, you have to wrap it inside another string for us to validate it correctly.
65+
> Objects are made using strings, while strings are made using double strings. This means that in order for you to create a string, you have to wrap it inside another string for us to validate it correctly.
6666
6767
### Required
6868
- [opts.env.configuration](#optsenvconfiguration-required)
69-
- [opts.env.configuration.myConfig](#optsenvconfigurationmyConfig-required)
70-
- [myConfig.webpackOptions](#myConfigwebpackOptions-required)
69+
- [opts.env.configuration.myObj](#optsenvconfigurationmyObj-required)
70+
- [myObj.webpackOptions](#myObjwebpackOptions-required)
7171
- [writing()](#writing()-required)
7272

7373
### Optional
74-
- [myConfig.merge](#myConfigmerge-optional)
75-
- [myConfig.topScope](#myConfigtopScope-optional)
76-
- [myConfig.configName](#myConfigconfigName-optional)
74+
- [myObj.merge](#myObjmerge-optional)
75+
- [myObj.topScope](#myObjtopScope-optional)
76+
- [myObj.configName](#myObjconfigName-optional)
7777

78-
### `opts.env.configuration` (required)
78+
### `opts.env.configuration`(required)
7979

80-
Is initialized inside the constructor of your generator in order for the CLI to work.
80+
This is the entry point your configuration, initialize it inside the constructor of your generator in order for the CLI to work:
8181

8282
```js
8383
constructor(args, opts) {
8484
super(args, opts);
8585
opts.env.configuration = {};
8686
}
8787
```
88+
### `opts.env.configuration.myObj` (required)
8889

89-
### `opts.env.configuration.myConfig` (required)
90-
91-
Every `myConfig` will be transformed into a webpack configuration. You can name those keys as you prefer (e.g. `dev`, `prod`):
90+
This is your scaffold, you add here the options that the CLI will transform into a Webpack configuration. You can have many different scaffolds named as you prefer, representing different configurations like `dev.config` or `prod.config`:
9291

9392
```js
9493
constructor(args, opts) {
@@ -100,56 +99,50 @@ constructor(args, opts) {
10099
}
101100
```
102101

103-
### `myConfig.webpackOptions` (required)
104-
105-
This object behaves as a regular webpack configuration, you declare here properties you want to scaffold, like `entry`, `output` and `context`:
102+
### `myObj.webpackOptions` (required)
106103

107-
(Inside a yeoman method)
104+
This object has the same format as a regular Webpack configuration, so you declare here the properties that you want to scaffold, like `entry`, `output` and `context`. You can intialize this inside a yeoman method:
108105

109106
```js
110-
this.options.env.configuration.dev =
111-
webpackOptions: {
112-
entry: '\'app.js\'',
113-
output: {....}
114-
}
107+
this.options.env.configuration.dev.webpackOptions = {
108+
entry: '\'app.js\'',
109+
output: {...}
115110
};
116111
```
117112

118-
### `writing()` (required)
113+
### `myObj.merge` (optional)
119114

120-
For the scaffolding instance to run, you need to write your configuration to a `.yo-rc.json` file. This could be done using one of the lifecycles in the yeoman generator, such as the `writing` method:
115+
If you want to use [`webpack-merge`](https://github.com/survivejs/webpack-merge), you can set the `merge` property of `myObj` to the name of the configuration you want to merge it with:
121116

122117
```js
123-
writing() {
124-
this.config.set('configuration', myConfig)
125-
}
118+
this.options.env.configuration.dev.merge = 'myConfig';
126119
```
127120

128-
### `myConfig.merge` (optional)
121+
### `myObj.topScope`(optional)
129122

130-
If you want to use `webpack-merge`, you can set the `merge` property with the name of the configuration you want to merge with:
123+
The `topScope` property is where you write all the special code needed by your configuration, like module imports and function/variables definitions:
131124

132125
```js
133-
this.options.env.configuration.dev = {
134-
merge: 'anotherConfig'
135-
};
126+
this.options.env.configuration.dev.topScope = [
127+
'const webpack = require(\'webpack\');',
128+
'const path = require(\'path\');'
129+
];
136130
```
137131

138-
### `myConfig.topScope` (optional)
132+
### `myObj.configName`(optional)
139133

140-
The `topScope` property is a way for the to add special behaviours to your scaffold, like functions that could be called inside a configuration, variable initializations and module imports:
134+
`configName` allows you to customize the name of your configuration file. For example you can name it `webpack.base.js` instead of the default `webpack.config.js`:
141135

142136
```js
143-
this.options.env.configuration.dev.topScope = [
144-
'var webpack = require(\'webpack\');'
145-
'var path = require(\'path\');'
146-
];
137+
this.options.env.configuration.dev.configName = 'base';
147138
```
148139

149-
### `myConfig.configName` (optional)
140+
### `writing` (required)
150141

151-
Used if you want to name your `webpack.config.js` differently:
142+
For the scaffolding instance to run, you need to write your configuration to a `.yo-rc.json` file. This could be done using one of the lifecycles in the yeoman generator, such as the `writing` method:
152143

153144
```js
154-
this.options.env.configuration.dev.configName = 'base';
145+
writing() {
146+
this.config.set('configuration', myObj)
147+
}
155148
```

0 commit comments

Comments
 (0)