Skip to content

Commit 8949f82

Browse files
committed
docs(scaffolding): improved structure, formatting, typos
1 parent ccec130 commit 8949f82

File tree

1 file changed

+81
-45
lines changed

1 file changed

+81
-45
lines changed

SCAFFOLDING.md

Lines changed: 81 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,101 +2,137 @@
22

33
Setting up webpack for the first time is hard. Writing advanced configurations to optimize performance is even harder. The `init` feature is designed to support people that want to create their own configuration or initializing other projects people create.
44

5-
## Writing a good scaffold
5+
## Creating a scaffold
66

7-
Before writing a `webpack-cli` scaffold, think about what you're trying to achieve. Do you want a "general" scaffold that could be used by any project or type of app? Do you want something very focused - like a scaffold that writes both your `webpack.config.js` and your framework code? It's also useful to think about the user experience for your scaffold.
7+
Before writing a `webpack-cli` scaffold, think about what you're trying to achieve. Do you want a "general" scaffold that could be used by any project or type of app? Do you want something very focused, like a scaffold that writes both your `webpack.config.js` and your framework code? It's also useful to think about the user experience for your scaffold.
88

99
`webpack-cli` offers an experience that is interactive and you can prompt users for questions (like, "What is your entry point?") to help customize the output accordingly.
1010

11-
## webpack-scaffold
11+
### Writing a scaffold
1212

13-
`webpack-scaffold` is a utility suite for creating scaffolds. It contains functions that could be of use for creating an scaffold yourself.
13+
There are many resources where you can learn how to write a scaffold, you can start from: [How do I compose a
14+
webpack-scaffold?](https://github.com/evenstensberg/webpack-scaffold-demo)
1415

15-
## webpack-scaffold-yourpackage
1616

17-
In order for `webpack-cli` to compile your package, it must be available on npm or on your local filesystem. If you are curious about how you can create your very own `scaffold`, please read [How do I compose a
18-
webpack-scaffold?](https://github.com/evenstensberg/webpack-scaffold-demo).
17+
[`webpack-scaffold`](./packages/webpack-scaffold) is a utility suite for creating scaffolds. It contains functions that could be used to create a scaffold.
1918

20-
If the package is on npm, its name must have a prefix of `webpack-scaffold`.
2119

22-
If the package is on your local filesystem, it can be named whatever you want. Pass the path to the package.
20+
### Running a scaffold
21+
22+
A scaffold can be executed running:
23+
24+
```js
25+
webpack-cli init <your-scaffold>
26+
```
27+
28+
#### Running a scaffold locally
29+
When the scaffold package is on you local file system you should pass its path to `init`:
30+
31+
```js
32+
webpack-cli init path/to/your/scaffold
33+
```
34+
35+
#### Running a scaffold from npm
36+
37+
If the package is on npm, its name must begin with `webpack-scaffold` and can be used running:
38+
39+
```js
40+
webpack-cli init webpack-scaffold-yourpackage
41+
```
42+
2343

2444
## API
2545

2646
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.
2747

28-
Objects are made using strings, while strings are made using double strings. This means that in order for you to create an string, you have to wrap it inside another string for us to validate it correctly.
48+
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.
2949

50+
### Required
51+
- [opts.env.configuration](#`opts.env.configuration`-(required))
52+
- [opts.env.configuration.myConfig](#`opts.env.configuration.myConfig`-(required))
53+
- [myConfig.webpackOptions](#`myConfig.webpackOptions`-(required))
54+
- [writing()](#`writing()`-(required))
55+
56+
### Optional
57+
- [myConfig.merge](#`myConfig.merge`-(optional))
58+
- [myConfig.topScope](#`myConfig.topScope`-(optional))
59+
- [myObj.configName](#`myObj.configName`-(optional))
3060

31-
### `opts.env.configuration`(required)
61+
### `opts.env.configuration` (required)
3262

33-
Initialized inside the constructor of your generator in order for the CLI to work.
63+
Is initialized inside the constructor of your generator in order for the CLI to work.
3464

3565
```js
3666
constructor(args, opts) {
37-
super(args, opts);
38-
opts.env.configuration = {};
39-
}
67+
super(args, opts);
68+
opts.env.configuration = {};
69+
}
4070
```
41-
### `opts.env.configuration.myObj` (required)
4271

43-
`myObj` is your scaffold. This is where you will add options for the CLI to transform into a configuration. You can name it anything, and you can also add more objects, that could represent a `dev.config` or `prod.config`.
72+
### `opts.env.configuration.myConfig` (required)
73+
74+
Every `myConfig` will be transformed into a webpack configuration. You can name those keys as you prefer (e.g. `dev`, `prod`):
4475

4576
```js
4677
constructor(args, opts) {
47-
super(args, opts);
48-
opts.env.configuration = {
49-
dev: {},
50-
prod: {}
51-
};
52-
}
78+
super(args, opts);
79+
opts.env.configuration = {
80+
dev: {},
81+
prod: {}
82+
};
83+
}
5384
```
5485

55-
### `myObj.webpackOptions` (required)
86+
### `myConfig.webpackOptions` (required)
5687

57-
As with a regular webpack configuration, this property behaves the same. Inside `webpackOptions` you can declare the properties you want to scaffold. You can for instance, scaffold `entry`, `output` and `context`.
88+
This object behaves as a regular webpack configuration, you declare here properties you want to scaffold, like `entry`, `output` and `context`:
5889

5990
(Inside a yeoman method)
91+
6092
```js
61-
this.options.env.configuration.dev.webpackOptions = {
62-
entry: '\'app.js\'',
63-
output: {....}
93+
this.options.env.configuration.dev =
94+
webpackOptions: {
95+
entry: '\'app.js\'',
96+
output: {....}
97+
}
6498
};
6599
```
66100

67-
### `myObj.merge` (optional)
101+
### `writing()` (required)
68102

69-
If you want to use `webpack-merge`, you can supply `merge` with the merge property, and the configuration you want to merge it with.
103+
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:
70104

71105
```js
72-
this.options.env.configuration.dev.merge = 'myConfig';
106+
writing() {
107+
this.config.set('configuration', myObj)
108+
}
73109
```
74110

75-
### `myObj.topScope`(optional)
111+
### `myConfig.merge` (optional)
76112

77-
The `topScope` property is a way for the authors to add special behaviours, like functions that could be called inside a configuration, or variable initializations and module imports.
113+
If you want to use `webpack-merge`, you can set the `merge` property with the name of the configuration you want to merge with:
78114

79115
```js
80-
this.options.env.configuration.dev.topScope = [
81-
'var webpack = require(\'webpack\');'
82-
'var path = require(\'path\');'
83-
];
116+
this.options.env.configuration.dev = {
117+
merge: 'anotherConfig'
118+
};
84119
```
85120

86-
### `myObj.configName`(optional)
121+
### `myConfig.topScope` (optional)
87122

88-
If you want to name your `webpack.config.js` something special, you can do that.
123+
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:
89124

90125
```js
91-
this.options.env.configuration.dev.configName = 'base';
126+
this.options.env.configuration.dev.topScope = [
127+
'var webpack = require(\'webpack\');'
128+
'var path = require(\'path\');'
129+
];
92130
```
93131

94-
### `writing` (required)
132+
### `myObj.configName` (optional)
95133

96-
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.
134+
Used if you want to name your `webpack.config.js` differently:
97135

98136
```js
99-
writing() {
100-
this.config.set('configuration', myObj)
101-
}
137+
this.options.env.configuration.dev.configName = 'base';
102138
```

0 commit comments

Comments
 (0)