-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
314 lines (297 loc) · 89.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPE html><html lang="en" data-reactroot=""><head><meta charset="utf-8"/><meta name="theme-color" content="#2B3A42"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Writing a Scaffold | webpack</title><meta name="description" content="webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset."/><meta property="og:site_name" content="webpack"/><meta property="og:type" content="website"/><meta property="og:title" content="Writing a Scaffold | webpack"/><meta property="og:description" name="description" content="webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset."/><meta property="og:image" content="/aad9d51e01a0dcc2caf5bee43dc8e647.svg"/><meta property="twitter:card" content="summary"/><meta property="twitter:site" content="@webpack"/><meta property="twitter:creator" content="@webpack"/><meta property="twitter:domain" content="https://webpack.js.org/"/><link rel="icon" type="image/x-icon" href="/bc3effb418df77da9e04825c48a58a49.ico"/><link rel="stylesheet" href="/c3bdf2a06d9967301c16.css"/><link rel="stylesheet" href="/00b4b8424f4141301d82.css"/><link rel="manifest" href="/manifest.json"/><link rel="canonical" href="https://webpack.js.org/contribute/writing-a-scaffold/"/><meta name="mobile-web-app-capable" content="yes"/><link rel="icon" sizes="192x192" href="/icon_192x192.png"/><link rel="icon" sizes="512x512" href="/icon_512x512.png"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><meta name="apple-mobile-web-app-title" content="webpack"/><link rel="apple-touch-icon-precomposed" href="/icon_180x180.png"/><link rel="mask-icon" href="/aad9d51e01a0dcc2caf5bee43dc8e647.svg" color="#465e69"/><meta name="msapplication-TileImage" content="/icon_150x150.png"/><meta name="msapplication-TileColor" content="#465e69"/></head><body><div id="root"><div class="site"><div class="site__header"><div class="notification-bar"><div class="container notification-bar__inner"><p>Sponsor webpack and get apparel from the <a href="https://webpack.threadless.com">official shop</a>! All proceeds go to our <a href="https://opencollective.com/webpack">open collective</a>!</p></div></div><header class="navigation "><section class="navigation__inner"><button aria-label="Open menu" class="navigation__mobile"><svg viewBox="-62 138 25 25"><g><g><path d="M-60.2,140.2h20.9c1,0,1.8,0.8,1.8,1.8l0,0c0,1-0.8,1.8-1.8,1.8h-20.9c-1,0-1.8-0.8-1.8-1.8l0,0 C-62,141-61.2,140.2-60.2,140.2z"></path><path d="M-60.2,148.7h20.9c1,0,1.8,0.8,1.8,1.8l0,0c0,1-0.8,1.8-1.8,1.8h-20.9c-1,0-1.8-0.8-1.8-1.8l0,0 C-62,149.5-61.2,148.7-60.2,148.7z"></path><path d="M-60.2,157.2h20.9c1,0,1.8,0.8,1.8,1.8l0,0c0,1-0.8,1.8-1.8,1.8h-20.9c-1,0-1.8-0.8-1.8-1.8l0,0 C-62,158-61.2,157.2-60.2,157.2z"></path></g></g></svg></button><a class="navigation__logo" href="/"><img class="logo" src="/e0b5805d423a4ec9473ee315250968b2.svg" alt="webpack logo"/></a><nav class="navigation__items"><a class="navigation__item " href="/concepts/">Documentation</a><a class="navigation__item navigation__item--active" href="/contribute/">Contribute</a><a class="navigation__item " href="/vote/">Vote</a><a href="https://medium.com/webpack" target="_blank" rel="noopener" class="navigation__item ">Blog</a><a href="https://github.com/webpack/webpack" target="_blank" rel="noopener" title="GitHub Repository" class="navigation__item navigation__item--icon "><i aria-hidden="true" class="icon-github"></i></a><a href="https://twitter.com/webpack" target="_blank" rel="noopener" title="webpack on Twitter" class="navigation__item navigation__item--icon "><i aria-hidden="true" class="icon-twitter"></i></a><a href="https://stackoverflow.com/questions/tagged/webpack" target="_blank" rel="noopener" title="webpack on Stack Overflow" class="navigation__item navigation__item--icon "><i aria-hidden="true" class="icon-stack-overflow"></i></a><span class="navigation__item navigation__item--icon"><nav class="dropdown navigation__languages"><button aria-haspopup="true" aria-expanded="false" aria-label="Select language"><img class="dropdown__language" alt="select language" src="/57c717e75066b659cfe19dc2a643153c.svg"/><i aria-hidden="true" class="dropdown__arrow"></i></button><div class="dropdown__list "><ul><li><a href="https://webpack.js.org/"><span>English</span></a></li><li><a href="https://webpack.docschina.org/"><span lang="zh">中文</span></a></li></ul></div></nav></span></nav><div class="navigation-search "><input type="text" class="navigation-search__input" placeholder="Search this site..." value=""/><button aria-label="Hide search box" class="navigation-search__icon navigation-search__clear"><svg viewBox="-137 138 25 25"><g transform="translate(0,-952.36218)"><path d="M-131.3,1094.4c-0.4,0-0.9,0.1-1.2,0.5c-0.7,0.7-0.7,1.7,0,2.4l5.6,5.6l-5.6,5.6c-0.7,0.7-0.7,1.7,0,2.4 c0.7,0.7,1.7,0.7,2.4,0l5.6-5.6l5.6,5.6c0.7,0.7,1.7,0.7,2.4,0c0.7-0.7,0.7-1.7,0-2.4l-5.6-5.6l5.6-5.6c0.7-0.7,0.7-1.7,0-2.4 c-0.7-0.7-1.7-0.7-2.4,0l-5.6,5.6l-5.6-5.6C-130.5,1094.5-130.9,1094.4-131.3,1094.4L-131.3,1094.4z"></path></g></svg></button><button aria-label="Show search box" class="navigation-search__icon navigation-search__search"><svg viewBox="-137 138 25 25"><g><path d="M-114.6,162.6l-7.5-7.5c-0.6-0.6-0.6-1.6,0-2.1l0,0c0.6-0.6,1.6-0.6,2.1,0l7.5,7.5c0.6,0.6,0.6,1.6,0,2.1l0,0 C-113,163.1-114,163.1-114.6,162.6z"></path><path d="M-134.1,140.9c-3.9,3.9-3.9,10.2,0,14.1s10.2,3.9,14.1,0s3.9-10.2,0-14.1S-130.2,137-134.1,140.9z M-122.1,153 c-2.7,2.7-7.1,2.7-9.8,0s-2.7-7.1,0-9.8s7.1-2.7,9.8,0C-119.4,145.9-119.4,150.2-122.1,153z"></path></g></svg></button></div></section><div class="navigation-sub"><div class="navigation-sub__inner"></div></div></header></div><div class="container site__content"><div class="sponsors"><a href="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship" target="_blank" rel="noopener" class="sponsors__content"><img src="/bf176a25b4f8227fea804854c98dc5e2.png"/><img src="/d19378a95ebe6b15d5ddea281138dcf4.svg" style="width:100px"/><div style="margin-top:1em;font-size:2em;text-align:center;color:#535353">ag-grid is proud to partner with webpack</div></a></div><nav class="sidebar site__sidebar"><div class="sidebar__inner"><div class="relative z-0 bg-white dark:bg-gray-100 "><select class="text-gray-600 text-14 px-5 py-5 appearance-none box-border border border-gray-200 border-solid flex-col flex w-full rounded-none bg-transparent bg-none"><option value="5">Webpack 5</option><option selected="" value="4">Webpack 4</option></select><img src="/33e97d95c634809004ee2830b6297e89.svg" class="absolute right-5 top-5 fill-current text-gray-300 z-[-1]" width="20" height="20"/></div><div class="sidebar-item sidebar-item--disabled`"><i class="sidebar-item__toggle icon-vertical-bar"></i><a class="sidebar-item__title sidebar-link__print" href="/contribute/printable/" rel="nofollow" alt="Print" title="Print" target="_blank">Print Section<img src="/96ccbfac58b65e83657a220603e00abe.svg"/></a></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/contribute/">Contribute</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Developers"><a href="/contribute/#developers">Developers</a></li><li class="sidebar-item__anchor" title="How Can I Help?"><a href="/contribute/#how-can-i-help">How Can I Help?</a></li><li class="sidebar-item__anchor" title="Encouraging Employers"><a href="/contribute/#encouraging-employers">Encouraging Employers</a></li><li class="sidebar-item__anchor" title="Your Contributions"><a href="/contribute/#your-contributions">Your Contributions</a></li><li class="sidebar-item__anchor" title="Executives"><a href="/contribute/#executives">Executives</a></li><li class="sidebar-item__anchor" title="Sponsorship"><a href="/contribute/#sponsorship">Sponsorship</a></li><li class="sidebar-item__anchor" title="Anyone Else"><a href="/contribute/#anyone-else">Anyone Else</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/contribute/writers-guide/">Writer's Guide</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Process"><a href="/contribute/writers-guide/#process">Process</a></li><li class="sidebar-item__anchor" title="YAML Frontmatter"><a href="/contribute/writers-guide/#yaml-frontmatter">YAML Frontmatter</a></li><li class="sidebar-item__anchor" title="Article Structure"><a href="/contribute/writers-guide/#article-structure">Article Structure</a></li><li class="sidebar-item__anchor" title="Typesetting"><a href="/contribute/writers-guide/#typesetting">Typesetting</a></li><li class="sidebar-item__anchor" title="Formatting"><a href="/contribute/writers-guide/#formatting">Formatting</a></li><li class="sidebar-item__anchor" title="Code"><a href="/contribute/writers-guide/#code">Code</a></li><li class="sidebar-item__anchor" title="Quotation"><a href="/contribute/writers-guide/#quotation">Quotation</a></li><li class="sidebar-item__anchor" title="Lists"><a href="/contribute/writers-guide/#lists">Lists</a></li><li class="sidebar-item__anchor" title="Tables"><a href="/contribute/writers-guide/#tables">Tables</a></li><li class="sidebar-item__anchor" title="Configuration Properties"><a href="/contribute/writers-guide/#configuration-properties">Configuration Properties</a></li><li class="sidebar-item__anchor" title="Quotes"><a href="/contribute/writers-guide/#quotes">Quotes</a></li><li class="sidebar-item__anchor" title="Blockquote"><a href="/contribute/writers-guide/#blockquote">Blockquote</a></li><li class="sidebar-item__anchor" title="Tip"><a href="/contribute/writers-guide/#tip">Tip</a></li><li class="sidebar-item__anchor" title="Assumptions and simplicity"><a href="/contribute/writers-guide/#assumptions-and-simplicity">Assumptions and simplicity</a></li><li class="sidebar-item__anchor" title="Configuration defaults and types"><a href="/contribute/writers-guide/#configuration-defaults-and-types">Configuration defaults and types</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/contribute/writing-a-loader/">Writing a Loader</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Setup"><a href="/contribute/writing-a-loader/#setup">Setup</a></li><li class="sidebar-item__anchor" title="Simple Usage"><a href="/contribute/writing-a-loader/#simple-usage">Simple Usage</a></li><li class="sidebar-item__anchor" title="Complex Usage"><a href="/contribute/writing-a-loader/#complex-usage">Complex Usage</a></li><li class="sidebar-item__anchor" title="Guidelines"><a href="/contribute/writing-a-loader/#guidelines">Guidelines</a></li><li class="sidebar-item__anchor" title="Simple"><a href="/contribute/writing-a-loader/#simple">Simple</a></li><li class="sidebar-item__anchor" title="Chaining"><a href="/contribute/writing-a-loader/#chaining">Chaining</a></li><li class="sidebar-item__anchor" title="Modular"><a href="/contribute/writing-a-loader/#modular">Modular</a></li><li class="sidebar-item__anchor" title="Stateless"><a href="/contribute/writing-a-loader/#stateless">Stateless</a></li><li class="sidebar-item__anchor" title="Loader Utilities"><a href="/contribute/writing-a-loader/#loader-utilities">Loader Utilities</a></li><li class="sidebar-item__anchor" title="Loader Dependencies"><a href="/contribute/writing-a-loader/#loader-dependencies">Loader Dependencies</a></li><li class="sidebar-item__anchor" title="Module Dependencies"><a href="/contribute/writing-a-loader/#module-dependencies">Module Dependencies</a></li><li class="sidebar-item__anchor" title="Common Code"><a href="/contribute/writing-a-loader/#common-code">Common Code</a></li><li class="sidebar-item__anchor" title="Absolute Paths"><a href="/contribute/writing-a-loader/#absolute-paths">Absolute Paths</a></li><li class="sidebar-item__anchor" title="Peer Dependencies"><a href="/contribute/writing-a-loader/#peer-dependencies">Peer Dependencies</a></li><li class="sidebar-item__anchor" title="Testing"><a href="/contribute/writing-a-loader/#testing">Testing</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/contribute/writing-a-plugin/">Writing a Plugin</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Creating a Plugin"><a href="/contribute/writing-a-plugin/#creating-a-plugin">Creating a Plugin</a></li><li class="sidebar-item__anchor" title="Basic plugin architecture"><a href="/contribute/writing-a-plugin/#basic-plugin-architecture">Basic plugin architecture</a></li><li class="sidebar-item__anchor" title="Compiler and Compilation"><a href="/contribute/writing-a-plugin/#compiler-and-compilation">Compiler and Compilation</a></li><li class="sidebar-item__anchor" title="Async event hooks"><a href="/contribute/writing-a-plugin/#async-event-hooks">Async event hooks</a></li><li class="sidebar-item__anchor" title="tapAsync"><a href="/contribute/writing-a-plugin/#tapasync">tapAsync</a></li><li class="sidebar-item__anchor" title="tapPromise"><a href="/contribute/writing-a-plugin/#tappromise">tapPromise</a></li><li class="sidebar-item__anchor" title="Example"><a href="/contribute/writing-a-plugin/#example">Example</a></li><li class="sidebar-item__anchor" title="Different Plugin Shapes"><a href="/contribute/writing-a-plugin/#different-plugin-shapes">Different Plugin Shapes</a></li><li class="sidebar-item__anchor" title="Synchronous Hooks"><a href="/contribute/writing-a-plugin/#synchronous-hooks">Synchronous Hooks</a></li><li class="sidebar-item__anchor" title="Asynchronous Hooks"><a href="/contribute/writing-a-plugin/#asynchronous-hooks">Asynchronous Hooks</a></li></ul></div></div><div><div class="sidebar-item sidebar-item--open "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/contribute/writing-a-scaffold/">Writing a Scaffold</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Quick Start"><a href="/contribute/writing-a-scaffold/#quick-start">Quick Start</a></li><li class="sidebar-item__anchor" title="Setup"><a href="/contribute/writing-a-scaffold/#setup">Setup</a></li><li class="sidebar-item__anchor" title="Make it interactive"><a href="/contribute/writing-a-scaffold/#make-it-interactive">Make it interactive</a></li><li class="sidebar-item__anchor" title="Configuring Webpack"><a href="/contribute/writing-a-scaffold/#configuring-webpack">Configuring Webpack</a></li><li class="sidebar-item__anchor" title="Dev Configurations"><a href="/contribute/writing-a-scaffold/#dev-configurations">Dev Configurations</a></li><li class="sidebar-item__anchor" title="Some more configs"><a href="/contribute/writing-a-scaffold/#some-more-configs">Some more configs</a></li><li class="sidebar-item__anchor" title="Basic Scaffold"><a href="/contribute/writing-a-scaffold/#basic-scaffold">Basic Scaffold</a></li><li class="sidebar-item__anchor" title="Add more functionality"><a href="/contribute/writing-a-scaffold/#add-more-functionality">Add more functionality</a></li><li class="sidebar-item__anchor" title="Create string with name"><a href="/contribute/writing-a-scaffold/#create-string-with-name">Create string with name</a></li><li class="sidebar-item__anchor" title="Defining scopes"><a href="/contribute/writing-a-scaffold/#defining-scopes">Defining scopes</a></li><li class="sidebar-item__anchor" title="Configuration nomenclature"><a href="/contribute/writing-a-scaffold/#configuration-nomenclature">Configuration nomenclature</a></li><li class="sidebar-item__anchor" title="About .yo-rc.json"><a href="/contribute/writing-a-scaffold/#about-yo-rcjson">About .yo-rc.json</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/contribute/plugin-patterns/">Plugin Patterns</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Exploring assets, chunks, modules, and dependencies"><a href="/contribute/plugin-patterns/#exploring-assets-chunks-modules-and-dependencies">Exploring assets, chunks, modules, and dependencies</a></li><li class="sidebar-item__anchor" title="Monitoring the watch graph"><a href="/contribute/plugin-patterns/#monitoring-the-watch-graph">Monitoring the watch graph</a></li><li class="sidebar-item__anchor" title="Changed chunks"><a href="/contribute/plugin-patterns/#changed-chunks">Changed chunks</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/contribute/release-process/">Release Process</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Pull Requests"><a href="/contribute/release-process/#pull-requests">Pull Requests</a></li><li class="sidebar-item__anchor" title="Releasing"><a href="/contribute/release-process/#releasing">Releasing</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/contribute/debugging/">Debugging</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Stats"><a href="/contribute/debugging/#stats">Stats</a></li><li class="sidebar-item__anchor" title="DevTools"><a href="/contribute/debugging/#devtools">DevTools</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/contribute/printable/">Printable</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Contribute"><a href="/contribute/printable/#contribute">Contribute</a></li><li class="sidebar-item__anchor" title="Developers"><a href="/contribute/printable/#developers">Developers</a></li><li class="sidebar-item__anchor" title="How Can I Help?"><a href="/contribute/printable/#how-can-i-help">How Can I Help?</a></li><li class="sidebar-item__anchor" title="Encouraging Employers"><a href="/contribute/printable/#encouraging-employers">Encouraging Employers</a></li><li class="sidebar-item__anchor" title="Your Contributions"><a href="/contribute/printable/#your-contributions">Your Contributions</a></li><li class="sidebar-item__anchor" title="Executives"><a href="/contribute/printable/#executives">Executives</a></li><li class="sidebar-item__anchor" title="Sponsorship"><a href="/contribute/printable/#sponsorship">Sponsorship</a></li><li class="sidebar-item__anchor" title="Anyone Else"><a href="/contribute/printable/#anyone-else">Anyone Else</a></li><li class="sidebar-item__anchor" title="Writer's Guide"><a href="/contribute/printable/#writers-guide">Writer's Guide</a></li><li class="sidebar-item__anchor" title="Process"><a href="/contribute/printable/#process">Process</a></li><li class="sidebar-item__anchor" title="YAML Frontmatter"><a href="/contribute/printable/#yaml-frontmatter">YAML Frontmatter</a></li><li class="sidebar-item__anchor" title="Article Structure"><a href="/contribute/printable/#article-structure">Article Structure</a></li><li class="sidebar-item__anchor" title="Typesetting"><a href="/contribute/printable/#typesetting">Typesetting</a></li><li class="sidebar-item__anchor" title="Formatting"><a href="/contribute/printable/#formatting">Formatting</a></li><li class="sidebar-item__anchor" title="Code"><a href="/contribute/printable/#code">Code</a></li><li class="sidebar-item__anchor" title="Quotation"><a href="/contribute/printable/#quotation">Quotation</a></li><li class="sidebar-item__anchor" title="Lists"><a href="/contribute/printable/#lists">Lists</a></li><li class="sidebar-item__anchor" title="Tables"><a href="/contribute/printable/#tables">Tables</a></li><li class="sidebar-item__anchor" title="Configuration Properties"><a href="/contribute/printable/#configuration-properties">Configuration Properties</a></li><li class="sidebar-item__anchor" title="Quotes"><a href="/contribute/printable/#quotes">Quotes</a></li><li class="sidebar-item__anchor" title="Blockquote"><a href="/contribute/printable/#blockquote">Blockquote</a></li><li class="sidebar-item__anchor" title="Tip"><a href="/contribute/printable/#tip">Tip</a></li><li class="sidebar-item__anchor" title="Assumptions and simplicity"><a href="/contribute/printable/#assumptions-and-simplicity">Assumptions and simplicity</a></li><li class="sidebar-item__anchor" title="Configuration defaults and types"><a href="/contribute/printable/#configuration-defaults-and-types">Configuration defaults and types</a></li><li class="sidebar-item__anchor" title="Writing a Loader"><a href="/contribute/printable/#writing-a-loader">Writing a Loader</a></li><li class="sidebar-item__anchor" title="Setup"><a href="/contribute/printable/#setup">Setup</a></li><li class="sidebar-item__anchor" title="Simple Usage"><a href="/contribute/printable/#simple-usage">Simple Usage</a></li><li class="sidebar-item__anchor" title="Complex Usage"><a href="/contribute/printable/#complex-usage">Complex Usage</a></li><li class="sidebar-item__anchor" title="Guidelines"><a href="/contribute/printable/#guidelines">Guidelines</a></li><li class="sidebar-item__anchor" title="Simple"><a href="/contribute/printable/#simple">Simple</a></li><li class="sidebar-item__anchor" title="Chaining"><a href="/contribute/printable/#chaining">Chaining</a></li><li class="sidebar-item__anchor" title="Modular"><a href="/contribute/printable/#modular">Modular</a></li><li class="sidebar-item__anchor" title="Stateless"><a href="/contribute/printable/#stateless">Stateless</a></li><li class="sidebar-item__anchor" title="Loader Utilities"><a href="/contribute/printable/#loader-utilities">Loader Utilities</a></li><li class="sidebar-item__anchor" title="Loader Dependencies"><a href="/contribute/printable/#loader-dependencies">Loader Dependencies</a></li><li class="sidebar-item__anchor" title="Module Dependencies"><a href="/contribute/printable/#module-dependencies">Module Dependencies</a></li><li class="sidebar-item__anchor" title="Common Code"><a href="/contribute/printable/#common-code">Common Code</a></li><li class="sidebar-item__anchor" title="Absolute Paths"><a href="/contribute/printable/#absolute-paths">Absolute Paths</a></li><li class="sidebar-item__anchor" title="Peer Dependencies"><a href="/contribute/printable/#peer-dependencies">Peer Dependencies</a></li><li class="sidebar-item__anchor" title="Testing"><a href="/contribute/printable/#testing">Testing</a></li><li class="sidebar-item__anchor" title="Writing a Plugin"><a href="/contribute/printable/#writing-a-plugin">Writing a Plugin</a></li><li class="sidebar-item__anchor" title="Creating a Plugin"><a href="/contribute/printable/#creating-a-plugin">Creating a Plugin</a></li><li class="sidebar-item__anchor" title="Basic plugin architecture"><a href="/contribute/printable/#basic-plugin-architecture">Basic plugin architecture</a></li><li class="sidebar-item__anchor" title="Compiler and Compilation"><a href="/contribute/printable/#compiler-and-compilation">Compiler and Compilation</a></li><li class="sidebar-item__anchor" title="Async event hooks"><a href="/contribute/printable/#async-event-hooks">Async event hooks</a></li><li class="sidebar-item__anchor" title="tapAsync"><a href="/contribute/printable/#tapasync">tapAsync</a></li><li class="sidebar-item__anchor" title="tapPromise"><a href="/contribute/printable/#tappromise">tapPromise</a></li><li class="sidebar-item__anchor" title="Example"><a href="/contribute/printable/#example">Example</a></li><li class="sidebar-item__anchor" title="Different Plugin Shapes"><a href="/contribute/printable/#different-plugin-shapes">Different Plugin Shapes</a></li><li class="sidebar-item__anchor" title="Synchronous Hooks"><a href="/contribute/printable/#synchronous-hooks">Synchronous Hooks</a></li><li class="sidebar-item__anchor" title="Asynchronous Hooks"><a href="/contribute/printable/#asynchronous-hooks">Asynchronous Hooks</a></li><li class="sidebar-item__anchor" title="Writing a Scaffold"><a href="/contribute/printable/#writing-a-scaffold">Writing a Scaffold</a></li><li class="sidebar-item__anchor" title="Quick Start"><a href="/contribute/printable/#quick-start">Quick Start</a></li><li class="sidebar-item__anchor" title="Setup"><a href="/contribute/printable/#setup-1">Setup</a></li><li class="sidebar-item__anchor" title="Make it interactive"><a href="/contribute/printable/#make-it-interactive">Make it interactive</a></li><li class="sidebar-item__anchor" title="Configuring Webpack"><a href="/contribute/printable/#configuring-webpack">Configuring Webpack</a></li><li class="sidebar-item__anchor" title="Dev Configurations"><a href="/contribute/printable/#dev-configurations">Dev Configurations</a></li><li class="sidebar-item__anchor" title="Some more configs"><a href="/contribute/printable/#some-more-configs">Some more configs</a></li><li class="sidebar-item__anchor" title="Basic Scaffold"><a href="/contribute/printable/#basic-scaffold">Basic Scaffold</a></li><li class="sidebar-item__anchor" title="Add more functionality"><a href="/contribute/printable/#add-more-functionality">Add more functionality</a></li><li class="sidebar-item__anchor" title="Create string with name"><a href="/contribute/printable/#create-string-with-name">Create string with name</a></li><li class="sidebar-item__anchor" title="Defining scopes"><a href="/contribute/printable/#defining-scopes">Defining scopes</a></li><li class="sidebar-item__anchor" title="Configuration nomenclature"><a href="/contribute/printable/#configuration-nomenclature">Configuration nomenclature</a></li><li class="sidebar-item__anchor" title="About .yo-rc.json"><a href="/contribute/printable/#about-yo-rcjson">About .yo-rc.json</a></li><li class="sidebar-item__anchor" title="Plugin Patterns"><a href="/contribute/printable/#plugin-patterns">Plugin Patterns</a></li><li class="sidebar-item__anchor" title="Exploring assets, chunks, modules, and dependencies"><a href="/contribute/printable/#exploring-assets-chunks-modules-and-dependencies">Exploring assets, chunks, modules, and dependencies</a></li><li class="sidebar-item__anchor" title="Monitoring the watch graph"><a href="/contribute/printable/#monitoring-the-watch-graph">Monitoring the watch graph</a></li><li class="sidebar-item__anchor" title="Changed chunks"><a href="/contribute/printable/#changed-chunks">Changed chunks</a></li><li class="sidebar-item__anchor" title="Release Process"><a href="/contribute/printable/#release-process">Release Process</a></li><li class="sidebar-item__anchor" title="Pull Requests"><a href="/contribute/printable/#pull-requests">Pull Requests</a></li><li class="sidebar-item__anchor" title="Releasing"><a href="/contribute/printable/#releasing">Releasing</a></li><li class="sidebar-item__anchor" title="Debugging"><a href="/contribute/printable/#debugging">Debugging</a></li><li class="sidebar-item__anchor" title="Stats"><a href="/contribute/printable/#stats">Stats</a></li><li class="sidebar-item__anchor" title="DevTools"><a href="/contribute/printable/#devtools">DevTools</a></li></ul></div></div></div></nav><section class="page"><div class="page-links"><a class="page-links__link" href="https://github.com/webpack/webpack.js.org/edit/master/src/content/contribute/writing-a-scaffold.md">Edit Document<i class="page-links__icon icon-edit"></i></a><span class="page-links__gap">|</span><button class="page-links__link page-links__print as-link" title="Print this page">Print Document<img src="/96ccbfac58b65e83657a220603e00abe.svg"/></button></div><div class="markdown"><h1>Writing a Scaffold</h1><div><p>A scaffold is an ECMAScript Module which exports a <code>yeoman generator</code> based on <a href="/guides/scaffolding/#api">Scaffolding API</a>. Scaffolds can be used but not limited to initialize a new webpack project, tailored to a specific use case. To view what we are building today, run <code>webpack init webpack-scaffold-demo</code>. This demo will show you how to build your own webpack scaffold. Let's start by creating a file named <code>generator.js</code>.</p>
<h2 id="quick-start">Quick Start<a href="#quick-start" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p><a href="https://github.com/rishabh3112/webpack-scaffold-starter"><code>webpack-scaffold-starter</code></a> can be used to setup a new scaffold project. To do so, follow the following commands.</p>
<pre><code class="hljs language-bash"><span class="token function">mkdir</span> my-scaffold <span class="token operator">&&</span> <span class="token function">cd</span> my-scaffold
<span class="token function">npm</span> <span class="token function">install</span> webpack-scaffold-starter
npx webpack-scaffold
<span class="token function">git</span> init <span class="token comment"># optional</span></code></pre>
<h2 id="setup">Setup<a href="#setup" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>Before writing a <code>webpack-cli</code> 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 focused, like a scaffold that writes both your <code>webpack.config.js</code> and your framework code? It's also useful to think about the user experience for your scaffold.</p>
<p><code>webpack-cli</code> offers interactive experience to customize the output accordingly. For example asking questions like: "What is your entry point?".</p>
<p>Let's create our skeleton. In order for the webpack CLI to detect our options, we have to define some properties in the constructor.</p>
<p><strong>generator.js</strong></p>
<pre><code class="hljs language-js"><span class="token keyword">const</span> Generator <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'yeoman-generator'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token keyword">class</span> <span class="token class-name">WebpackGenerator</span> <span class="token keyword">extends</span> <span class="token class-name">Generator</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>args<span class="token punctuation">,</span> opts<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>args<span class="token punctuation">,</span> opts<span class="token punctuation">)</span><span class="token punctuation">;</span>
opts<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration <span class="token operator">=</span> <span class="token punctuation">{</span>
dev<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p><code>configuration</code> object has to have one property you name (we named it <code>dev</code> in the snippet above). A good practice is to name the underlying property with the name you want to give to your <code>webpack.config.js</code> file for a better indication of what configuration each file has.</p>
<h2 id="make-it-interactive">Make it interactive<a href="#make-it-interactive" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>In order for us to interact with the users, we make use of the <a href="http://yeoman.io/authoring/user-interactions.html"><code>prompting</code></a> method yeoman has. In this method, we can get various answers from the user, like asking for entry points or plugins. You can either manually create each object representing a question or you can make good use of our utilities from <a href="https://github.com/webpack/webpack-cli/tree/master/packages/webpack-scaffold"><code>webpack-scaffold</code></a>. We are in a good mood today, so let's build a configuration only if the user chooses <code>Pengwings</code>.</p>
<pre><code class="hljs language-js"><span class="token keyword">const</span> Generator <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'yeoman-generator'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> List <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@webpack-cli/webpack-scaffold'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>List<span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token keyword">class</span> <span class="token class-name">WebpackGenerator</span> <span class="token keyword">extends</span> <span class="token class-name">Generator</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>args<span class="token punctuation">,</span> opts<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>args<span class="token punctuation">,</span> opts<span class="token punctuation">)</span><span class="token punctuation">;</span>
opts<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration <span class="token operator">=</span> <span class="token punctuation">{</span>
dev<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">prompting</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
<span class="token function">List</span><span class="token punctuation">(</span><span class="token string">'confirm'</span><span class="token punctuation">,</span> <span class="token string">'Welcome to the demo scaffold! Are you ready?'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'Yes'</span><span class="token punctuation">,</span> <span class="token string">'No'</span><span class="token punctuation">,</span> <span class="token string">'Pengwings'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>answer <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>answer<span class="token punctuation">[</span><span class="token string">'confirm'</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'Pengwings'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// build the configuration</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="configuring-webpack">Configuring Webpack<a href="#configuring-webpack" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>So far, we've made an interaction with the user. If you were coding along, great! So how do we proceed from here? Let's try to build a simple webpack configuration that has an <a href="/configuration/entry-context/#entry">entry point</a>, an <a href="/concepts/#output">output</a>, and a <a href="/configuration/entry-context/#context">context property</a>. For this, we need to create a <code>webpackOptions</code> property on our <code>dev</code> object. This is where <code>entry</code>, <code>output</code> and <code>context</code> is going to be hooked up, later resulting in a <code>webpack.config.js</code>.</p>
<blockquote class="tip">
<p>Define the <code>webpackOptions</code> property in the constructor to keep your scaffold as clean as possible!</p>
</blockquote>
<pre><code class="hljs language-js"><span class="token keyword">const</span> Generator <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'yeoman-generator'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> List <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@webpack-cli/webpack-scaffold'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>List<span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token keyword">class</span> <span class="token class-name">WebpackGenerator</span> <span class="token keyword">extends</span> <span class="token class-name">Generator</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>args<span class="token punctuation">,</span> opts<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>args<span class="token punctuation">,</span> opts<span class="token punctuation">)</span><span class="token punctuation">;</span>
opts<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration <span class="token operator">=</span> <span class="token punctuation">{</span>
dev<span class="token punctuation">:</span> <span class="token punctuation">{</span>
webpackOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">prompting</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
<span class="token function">List</span><span class="token punctuation">(</span><span class="token string">'confirm'</span><span class="token punctuation">,</span> <span class="token string">'Welcome to the demo scaffold! Are you ready?'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'Yes'</span><span class="token punctuation">,</span> <span class="token string">'No'</span><span class="token punctuation">,</span> <span class="token string">'Pengwings'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>answer <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>answer<span class="token punctuation">[</span><span class="token string">'confirm'</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'Pengwings'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// build the configuration</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="dev-configurations">Dev Configurations<a href="#dev-configurations" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>Congratulations! You've now created the base of a <code>webpack-scaffold</code>! Let's now add some more stuff to our future configuration file!
We are going to follow good convention, and extract our configuration into another file, named <code>dev-config.js</code>. As this is just regular JavaScript, we can make the module a function, and supply our <code>entry</code> as a parameter for us to build up a configuration file from.</p>
<p><strong>dev-config.js</strong></p>
<pre><code class="hljs language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">createDevConfig</span><span class="token punctuation">(</span>answer<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> devConfig <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p><strong>generator.js</strong></p>
<pre><code class="hljs language-js"><span class="token keyword">const</span> Generator <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'yeoman-generator'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> List <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@webpack-cli/webpack-scaffold'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>List<span class="token punctuation">;</span>
<span class="token keyword">const</span> createDevConfig <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./dev-config'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token keyword">class</span> <span class="token class-name">WebpackGenerator</span> <span class="token keyword">extends</span> <span class="token class-name">Generator</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>args<span class="token punctuation">,</span> opts<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>args<span class="token punctuation">,</span> opts<span class="token punctuation">)</span><span class="token punctuation">;</span>
opts<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration <span class="token operator">=</span> <span class="token punctuation">{</span>
dev<span class="token punctuation">:</span> <span class="token punctuation">{</span>
webpackOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">prompting</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
<span class="token function">List</span><span class="token punctuation">(</span><span class="token string">'confirm'</span><span class="token punctuation">,</span> <span class="token string">'Welcome to the demo scaffold! Are you ready?'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'Yes'</span><span class="token punctuation">,</span> <span class="token string">'No'</span><span class="token punctuation">,</span> <span class="token string">'Pengwings'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>answer <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>answer<span class="token punctuation">[</span><span class="token string">'confirm'</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'Pengwings'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration<span class="token punctuation">.</span>dev<span class="token punctuation">.</span>webpackOptions <span class="token operator">=</span> <span class="token function">createDevConfig</span><span class="token punctuation">(</span>answer<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>We've now abstracted that part of the code that's probably going to be really big. Let's go ahead and add another question, like asking for an entry point.</p>
<pre><code class="hljs language-js"><span class="token keyword">const</span> Generator <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'yeoman-generator'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> List <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@webpack-cli/webpack-scaffold'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>List<span class="token punctuation">;</span>
<span class="token keyword">const</span> Input <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@webpack-cli/webpack-scaffold'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>Input<span class="token punctuation">;</span>
<span class="token keyword">const</span> createDevConfig <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./dev-config'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token keyword">class</span> <span class="token class-name">WebpackGenerator</span> <span class="token keyword">extends</span> <span class="token class-name">Generator</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>args<span class="token punctuation">,</span> opts<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>args<span class="token punctuation">,</span> opts<span class="token punctuation">)</span><span class="token punctuation">;</span>
opts<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration <span class="token operator">=</span> <span class="token punctuation">{</span>
dev<span class="token punctuation">:</span> <span class="token punctuation">{</span>
webpackOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">prompting</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
<span class="token function">List</span><span class="token punctuation">(</span><span class="token string">'confirm'</span><span class="token punctuation">,</span> <span class="token string">'Welcome to the demo scaffold! Are you ready?'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'Yes'</span><span class="token punctuation">,</span> <span class="token string">'No'</span><span class="token punctuation">,</span> <span class="token string">'Pengwings'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">Input</span><span class="token punctuation">(</span><span class="token string">'entry'</span><span class="token punctuation">,</span> <span class="token string">'What is the entry point in your app?'</span><span class="token punctuation">)</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>answer <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>answer<span class="token punctuation">[</span><span class="token string">'confirm'</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'Pengwings'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration<span class="token punctuation">.</span>dev<span class="token punctuation">.</span>webpackOptions <span class="token operator">=</span> <span class="token function">createDevConfig</span><span class="token punctuation">(</span>answer<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="some-more-configs">Some more configs<a href="#some-more-configs" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>Let's look at <code>dev-config.js</code>. We have access to user's answers, use them to assign values to desired config properties, in this case - <code>entry</code>. We've also added an output property that has a <code>filename</code>.</p>
<blockquote class="tip">
<p>String values must be quoted twice. This is to preserve our ability to add other functionality, using only " ", while " 'Mystring' " resolves to a string.</p>
</blockquote>
<p><strong>dev-config.js</strong></p>
<pre><code class="hljs language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">createDevConfig</span><span class="token punctuation">(</span>answer<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> entryProp <span class="token operator">=</span> answer<span class="token punctuation">.</span>entry <span class="token operator">?</span> <span class="token punctuation">(</span> <span class="token string">'\''</span> <span class="token operator">+</span> answer<span class="token punctuation">.</span>entry <span class="token operator">+</span> <span class="token string">'\''</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token string">'\'index.js\''</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> devConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
entry<span class="token punctuation">:</span> entryProp<span class="token punctuation">,</span>
output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
filename<span class="token punctuation">:</span> <span class="token string">'\'[name].js\''</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> devConfig<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Run <code>webpack init webpack-scaffold-demo</code>, and you should see scaffold working.</p>
<h2 id="basic-scaffold">Basic Scaffold<a href="#basic-scaffold" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>Now that we've got our initial scaffold. Let's add the rest of our options! For the <code>context</code>, let's say we need to use <code>path</code>'s <code>join</code> function. For this, we use a single quote string. By default, the current directory is used, but it's recommended to pass a value in your configuration (context). This makes your configuration independent from CWD (current working directory).</p>
<pre><code class="hljs language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">createDevConfig</span><span class="token punctuation">(</span>answer<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> entryProp <span class="token operator">=</span> answer<span class="token punctuation">.</span>entry <span class="token operator">?</span> <span class="token punctuation">(</span> <span class="token string">'\''</span> <span class="token operator">+</span> answer<span class="token punctuation">.</span>entry <span class="token operator">+</span> <span class="token string">'\''</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token string">'\'index.js\''</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> devConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
entry<span class="token punctuation">:</span> entryProp<span class="token punctuation">,</span>
output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
filename<span class="token punctuation">:</span> <span class="token string">'\'[name].js\''</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
context<span class="token punctuation">:</span> <span class="token string">'path.join(__dirname, "src")'</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> devConfig<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="add-more-functionality">Add more functionality<a href="#add-more-functionality" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>Now we are ready to add a plugin. For this, let's create an utility for <a href="/plugins/html-webpack-plugin/"><code>html-webpack-plugin</code></a> based on the input from the user. Start by adding another question to our prompt.</p>
<pre><code class="hljs language-js"><span class="token keyword">const</span> Generator <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'yeoman-generator'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> List <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@webpack-cli/webpack-scaffold'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>List<span class="token punctuation">;</span>
<span class="token keyword">const</span> Input <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@webpack-cli/webpack-scaffold'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>Input<span class="token punctuation">;</span>
<span class="token keyword">const</span> createDevConfig <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./dev-config'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token keyword">class</span> <span class="token class-name">WebpackGenerator</span> <span class="token keyword">extends</span> <span class="token class-name">Generator</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>args<span class="token punctuation">,</span> opts<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>args<span class="token punctuation">,</span> opts<span class="token punctuation">)</span><span class="token punctuation">;</span>
opts<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration <span class="token operator">=</span> <span class="token punctuation">{</span>
dev<span class="token punctuation">:</span> <span class="token punctuation">{</span>
webpackOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">prompting</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
<span class="token function">List</span><span class="token punctuation">(</span><span class="token string">'confirm'</span><span class="token punctuation">,</span> <span class="token string">'Welcome to the demo scaffold! Are you ready?'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'Yes'</span><span class="token punctuation">,</span> <span class="token string">'No'</span><span class="token punctuation">,</span> <span class="token string">'Pengwings'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">Input</span><span class="token punctuation">(</span><span class="token string">'entry'</span><span class="token punctuation">,</span> <span class="token string">'What is the entry point in your app?'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">Input</span><span class="token punctuation">(</span><span class="token string">'plugin'</span><span class="token punctuation">,</span> <span class="token string">'What do you want to name your html file?'</span><span class="token punctuation">)</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>answer <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>answer<span class="token punctuation">[</span><span class="token string">'confirm'</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'Pengwings'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration<span class="token punctuation">.</span>dev<span class="token punctuation">.</span>webpackOptions <span class="token operator">=</span> <span class="token function">createDevConfig</span><span class="token punctuation">(</span>answer<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="create-string-with-name">Create string with name<a href="#create-string-with-name" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>Now, we've got to create a string with our answer. This is how it looks.</p>
<pre><code class="hljs language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">createHtmlPlugin</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token template-string"><span class="token string">` new HtmlWebpackPlugin({filename: "</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.html" }) `</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>We've now created a scaffold with <code>entry</code>, <code>output</code>, <code>context</code> and a <code>plugin</code>. If you're curious on the API, check the <a href="/guides/scaffolding/">API</a> for more info on how to scaffold with <code>regexps</code>, <code>module</code> and other!</p>
<h2 id="defining-scopes">Defining scopes<a href="#defining-scopes" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>In order for webpack to compile, we've got to import <code>path</code>. For this, we've got to define something called <code>topScope</code>. This is where our code before <code>module.exports</code> is going to, where you can add everything from imports and variables to functions. The syntax is the same as with the plugins, except for that the <code>topScope</code> property must be an array. In <code>topScope</code> you can define and import what's needed for your specific use case.</p>
<p><strong>generator.js</strong></p>
<pre><code class="hljs language-js"><span class="token keyword">const</span> Generator <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'yeoman-generator'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> List <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@webpack-cli/webpack-scaffold'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>List<span class="token punctuation">;</span>
<span class="token keyword">const</span> Input <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@webpack-cli/webpack-scaffold'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>Input<span class="token punctuation">;</span>
<span class="token keyword">const</span> createDevConfig <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./dev-config'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token keyword">class</span> <span class="token class-name">WebpackGenerator</span> <span class="token keyword">extends</span> <span class="token class-name">Generator</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>args<span class="token punctuation">,</span> opts<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>args<span class="token punctuation">,</span> opts<span class="token punctuation">)</span><span class="token punctuation">;</span>
opts<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration <span class="token operator">=</span> <span class="token punctuation">{</span>
dev<span class="token punctuation">:</span> <span class="token punctuation">{</span>
webpackOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">prompting</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
<span class="token function">List</span><span class="token punctuation">(</span><span class="token string">'confirm'</span><span class="token punctuation">,</span> <span class="token string">'Welcome to the demo scaffold! Are you ready?'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'Yes'</span><span class="token punctuation">,</span> <span class="token string">'No'</span><span class="token punctuation">,</span> <span class="token string">'Pengwings'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">Input</span><span class="token punctuation">(</span><span class="token string">'entry'</span><span class="token punctuation">,</span> <span class="token string">'What is the entry point in your app?'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">Input</span><span class="token punctuation">(</span><span class="token string">'plugin'</span><span class="token punctuation">,</span> <span class="token string">'What do you want to name your html file?'</span><span class="token punctuation">)</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>answer <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>answer<span class="token punctuation">[</span><span class="token string">'confirm'</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'Pengwings'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration<span class="token punctuation">.</span>dev<span class="token punctuation">.</span>webpackOptions <span class="token operator">=</span> <span class="token function">createDevConfig</span><span class="token punctuation">(</span>answer<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration<span class="token punctuation">.</span>dev<span class="token punctuation">.</span>topScope <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token string">'const path = require("path")'</span><span class="token punctuation">,</span>
<span class="token string">'const webpack = require("webpack")'</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="configuration-nomenclature">Configuration nomenclature<a href="#configuration-nomenclature" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>We recommend you to name your configuration file something meaningful, like in our case: "penguins". To do it, set the <code>this.options.env.configuration.dev.configName</code> to desired string.</p>
<pre><code class="hljs language-js"><span class="token keyword">const</span> Generator <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'yeoman-generator'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> List <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@webpack-cli/webpack-scaffold'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>List<span class="token punctuation">;</span>
<span class="token keyword">const</span> Input <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@webpack-cli/webpack-scaffold'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>Input<span class="token punctuation">;</span>
<span class="token keyword">const</span> createDevConfig <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./dev-config'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token keyword">class</span> <span class="token class-name">WebpackGenerator</span> <span class="token keyword">extends</span> <span class="token class-name">Generator</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>args<span class="token punctuation">,</span> opts<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>args<span class="token punctuation">,</span> opts<span class="token punctuation">)</span><span class="token punctuation">;</span>
opts<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration <span class="token operator">=</span> <span class="token punctuation">{</span>
dev<span class="token punctuation">:</span> <span class="token punctuation">{</span>
webpackOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">prompting</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
<span class="token function">List</span><span class="token punctuation">(</span><span class="token string">'confirm'</span><span class="token punctuation">,</span> <span class="token string">'Welcome to the demo scaffold! Are you ready?'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'Yes'</span><span class="token punctuation">,</span> <span class="token string">'No'</span><span class="token punctuation">,</span> <span class="token string">'Pengwings'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">Input</span><span class="token punctuation">(</span><span class="token string">'entry'</span><span class="token punctuation">,</span> <span class="token string">'What is the entry point in your app?'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">Input</span><span class="token punctuation">(</span><span class="token string">'plugin'</span><span class="token punctuation">,</span> <span class="token string">'What do you want to name your html file?'</span><span class="token punctuation">)</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>answer <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>answer<span class="token punctuation">[</span><span class="token string">'confirm'</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'Pengwings'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration<span class="token punctuation">.</span>dev<span class="token punctuation">.</span>webpackOptions <span class="token operator">=</span> <span class="token function">createDevConfig</span><span class="token punctuation">(</span>answer<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration<span class="token punctuation">.</span>dev<span class="token punctuation">.</span>topScope <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token string">'const path = require("path")'</span><span class="token punctuation">,</span>
<span class="token string">'const webpack = require("webpack")'</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration<span class="token punctuation">.</span>dev<span class="token punctuation">.</span>configName <span class="token operator">=</span> <span class="token string">'pengwings'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="about-yo-rcjson">About .yo-rc.json<a href="#about-yo-rcjson" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>To write the actual configuration, <a href="/api/cli/">webpack CLI</a> creates a <code>.yo-rc.json</code> file for it to parse the AST. In order for the CLI to understand how to parse the configuration, we need to write to the <code>.yo-rc.json</code>. This is done using the <code>writing</code> lifecycle method built-in by yeoman.</p>
<pre><code class="hljs language-js"><span class="token keyword">const</span> Generator <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'yeoman-generator'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> List <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@webpack-cli/webpack-scaffold'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>List<span class="token punctuation">;</span>
<span class="token keyword">const</span> Input <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@webpack-cli/webpack-scaffold'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>Input<span class="token punctuation">;</span>
<span class="token keyword">const</span> createDevConfig <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./dev-config'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token keyword">class</span> <span class="token class-name">WebpackGenerator</span> <span class="token keyword">extends</span> <span class="token class-name">Generator</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>args<span class="token punctuation">,</span> opts<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>args<span class="token punctuation">,</span> opts<span class="token punctuation">)</span><span class="token punctuation">;</span>
opts<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration <span class="token operator">=</span> <span class="token punctuation">{</span>
dev<span class="token punctuation">:</span> <span class="token punctuation">{</span>
webpackOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">prompting</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
<span class="token function">List</span><span class="token punctuation">(</span><span class="token string">'confirm'</span><span class="token punctuation">,</span> <span class="token string">'Welcome to the demo scaffold! Are you ready?'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'Yes'</span><span class="token punctuation">,</span> <span class="token string">'No'</span><span class="token punctuation">,</span> <span class="token string">'Pengwings'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">Input</span><span class="token punctuation">(</span><span class="token string">'entry'</span><span class="token punctuation">,</span> <span class="token string">'What is the entry point in your app?'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">Input</span><span class="token punctuation">(</span><span class="token string">'plugin'</span><span class="token punctuation">,</span> <span class="token string">'What do you want to name your html file?'</span><span class="token punctuation">)</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span> <span class="token punctuation">(</span>answer <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>answer<span class="token punctuation">[</span><span class="token string">'confirm'</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'Pengwings'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration<span class="token punctuation">.</span>dev<span class="token punctuation">.</span>webpackOptions <span class="token operator">=</span> <span class="token function">createDevConfig</span><span class="token punctuation">(</span>answer<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration<span class="token punctuation">.</span>dev<span class="token punctuation">.</span>topScope <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token string">'const path = require("path")'</span><span class="token punctuation">,</span>
<span class="token string">'const webpack = require("webpack")'</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration<span class="token punctuation">.</span>dev<span class="token punctuation">.</span>configName <span class="token operator">=</span> <span class="token string">'pengwings'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">writing</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>config<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'configuration'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>env<span class="token punctuation">.</span>configuration<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Congratulations 🎉 on completing your first scaffold! If you need help, submit an <a href="https://github.com/evenstensberg/webpack-scaffold-demo/issues">issue</a>, or reach out on <a href="https://twitter.com/evenstensberg">Twitter</a>!</p>
</div><div class="contributors__section"><hr/><h3>Contributors</h3><div class="contributors"><div class="contributors__list"><a class="contributor" href="https://github.com/pranshuchittora"><img alt="pranshuchittora" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->pranshuchittora</span></a><a class="contributor" href="https://github.com/EugeneHlushko"><img alt="EugeneHlushko" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->EugeneHlushko</span></a><a class="contributor" href="https://github.com/misterdev"><img alt="misterdev" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->misterdev</span></a><a class="contributor" href="https://github.com/rishabh3112"><img alt="rishabh3112" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->rishabh3112</span></a></div></div></div></div></section><div class="gitter"><div class="gitter__button"><i class="gitter__icon icon-gitter"></i></div></div></div><footer class="footer"><div class="container footer__inner"><section class="footer__left"><a class="footer__link" href="/guides/getting-started/">Get Started</a><a class="footer__link" href="/organization/">Organization</a><a class="footer__link" href="/starter-kits/">Starter Kits</a><a class="footer__link" href="/comparison/">Comparison</a></section><section class="footer__middle"><a class="footer__icon" href="/"><img src="/d19378a95ebe6b15d5ddea281138dcf4.svg" alt="webpack icon"/></a></section><section class="footer__right"><a href="https://webpack.threadless.com/" target="_blank" rel="noopener" class="footer__link">Swag Store</a><a class="footer__link" href="/glossary/">Glossary</a><a class="footer__link" href="/branding/">Branding</a><a href="https://gitter.im/webpack/webpack" target="_blank" rel="noopener" class="footer__link">Gitter</a><a href="https://github.com/webpack/webpack/releases" target="_blank" rel="noopener" class="footer__link">Changelog</a><a class="footer__link footer__license" href="/license"><img alt="Creative Commons License" src="/7052446b5e67df4434f4031afd2f1497.svg"/><img alt="Creative Commons License" src="/7ebb1b3901ce119694f65e04f6347ef5.svg"/></a></section></div></footer></div></div><script src="/vendor.bundle.js"></script><script src="/index.bundle.js"></script></body></html>