0
# Development Tools
1

2
Development server, build tools, and configuration inspection utilities for Vue CLI projects.
3

4
## Capabilities
5

6
### Serve Command
7

8
Development server proxy command that runs the project's serve script.
9

10
```bash { .api }
11
/**
12
 * Alias of "npm run serve" in the current project
13
 * Starts the development server with hot module replacement
14
 */
15
vue serve [options]
16

17
Options:
18
  All options are passed through to the underlying npm/yarn run serve command
19
```
20

21
**Usage Examples:**
22

23
```bash
24
# Start development server
25
vue serve
26

27
# Pass options to underlying serve command
28
vue serve -- --port 3000
29

30
# Works the same as:
31
npm run serve
32
# or
33
yarn serve
34
```
35

36
### Build Command
37

38
Production build proxy command that runs the project's build script.
39

40
```bash { .api }
41
/**
42
 * Alias of "npm run build" in the current project
43
 * Builds the project for production deployment
44
 */
45
vue build [options]
46

47
Options:
48
  All options are passed through to the underlying npm/yarn run build command
49
```
50

51
**Usage Examples:**
52

53
```bash
54
# Build for production
55
vue build
56

57
# Pass options to underlying build command
58
vue build -- --report
59

60
# Works the same as:
61
npm run build
62
# or
63
yarn build
64
```
65

66
### Inspect Command
67

68
Webpack configuration inspection tool for debugging and understanding build setup.
69

70
```bash { .api }
71
/**
72
 * Inspect the webpack config in a project with vue-cli-service
73
 * @param paths - Optional paths to inspect specific parts of config
74
 */
75
vue inspect [paths...]
76

77
Options:
78
  --mode <mode>                  Specify the mode (development, production, test)
79
  --rule <ruleName>              Inspect a specific module rule
80
  --plugin <pluginName>          Inspect a specific plugin
81
  --rules                        List all module rule names
82
  --plugins                      List all plugin names
83
  -v --verbose                   Show full function definitions in output
84
```
85

86
**Usage Examples:**
87

88
```bash
89
# Inspect entire webpack config
90
vue inspect
91

92
# Inspect config for production mode
93
vue inspect --mode production
94

95
# Inspect specific rule
96
vue inspect --rule vue
97

98
# Inspect specific plugin
99
vue inspect --plugin html
100

101
# List all available rules
102
vue inspect --rules
103

104
# List all available plugins  
105
vue inspect --plugins
106

107
# Inspect with verbose output
108
vue inspect --verbose
109

110
# Inspect specific path in config
111
vue inspect resolve.alias
112

113
# Inspect multiple paths
114
vue inspect module.rules output.path
115
```
116

117
### Inspect Function (Programmatic)
118

119
Programmatic interface for webpack configuration inspection.
120

121
```typescript { .api }
122
/**
123
 * Inspect webpack configuration programmatically
124
 * @param paths - Config paths to inspect
125
 * @param options - Inspection options
126
 * @param context - Project directory
127
 */
128
async function inspect(
129
  paths?: string[],
130
  options?: InspectOptions,
131
  context?: string
132
): Promise<string>;
133

134
interface InspectOptions {
135
  /** Build mode to inspect */
136
  mode?: string;
137
  /** Specific rule name to inspect */
138
  rule?: string;
139
  /** Specific plugin name to inspect */
140
  plugin?: string;
141
  /** List all rule names */
142
  rules?: boolean;
143
  /** List all plugin names */
144
  plugins?: boolean;
145
  /** Show full function definitions */
146
  verbose?: boolean;
147
}
148
```
149

150
**Usage Examples:**
151

152
```typescript
153
import { inspect } from "@vue/cli";
154

155
// Inspect entire config
156
const config = await inspect();
157
console.log(config);
158

159
// Inspect production config
160
const prodConfig = await inspect([], { mode: 'production' });
161

162
// Inspect specific rule
163
const vueRule = await inspect([], { rule: 'vue' });
164

165
// List all rules
166
const rules = await inspect([], { rules: true });
167

168
// Inspect specific config path
169
const aliases = await inspect(['resolve.alias']);
170
```
171

172
### Configuration Paths
173

174
Common webpack configuration paths that can be inspected.
175

176
```typescript { .api }
177
/**
178
 * Common configuration paths for inspection:
179
 */
180
const commonPaths = {
181
  /** Entry points configuration */
182
  entry: "entry",
183
  /** Output configuration */
184
  output: "output",
185
  /** Module resolution settings */
186
  resolve: "resolve",
187
  /** Module rules for file processing */  
188
  moduleRules: "module.rules",
189
  /** Webpack plugins */
190
  plugins: "plugins",
191
  /** Development server settings */
192
  devServer: "devServer",
193
  /** Optimization settings */
194
  optimization: "optimization",
195
  /** Performance settings */
196
  performance: "performance",
197
  /** External dependencies */
198
  externals: "externals",
199
  /** Resolve aliases */
200
  aliases: "resolve.alias",
201
  /** Extensions resolution order */
202
  extensions: "resolve.extensions"
203
};
204
```
205

206
### Rule and Plugin Names
207

208
Available rule and plugin names for inspection.
209

210
```typescript { .api }
211
/**
212
 * Common webpack rule names in Vue CLI projects:
213
 */
214
const commonRules = {
215
  /** Vue single file component processing */
216
  vue: "vue",
217
  /** JavaScript/TypeScript processing with Babel */
218
  js: "js", 
219
  /** TypeScript processing */
220
  ts: "ts",
221
  /** CSS processing */
222
  css: "css",
223
  /** PostCSS processing */
224
  postcss: "postcss",
225
  /** Sass/SCSS processing */
226
  scss: "scss",
227
  /** Less processing */
228
  less: "less",
229
  /** Stylus processing */
230
  stylus: "stylus",
231
  /** Image file processing */
232
  images: "images",
233
  /** SVG file processing */
234
  svg: "svg",
235
  /** Media file processing */
236
  media: "media",
237
  /** Font file processing */
238
  fonts: "fonts",
239
  /** ESLint linting */
240
  eslint: "eslint"
241
};
242

243
/**
244
 * Common webpack plugin names in Vue CLI projects:
245
 */
246
const commonPlugins = {
247
  /** Vue loader plugin */
248
  "vue-loader": "VueLoaderPlugin",
249
  /** HTML generation */
250
  html: "HtmlWebpackPlugin",
251
  /** CSS extraction */
252
  "extract-css": "MiniCssExtractPlugin",
253
  /** Progressive web app manifest */
254
  pwa: "GenerateSW",
255
  /** Bundle analysis */
256
  "bundle-analyzer": "BundleAnalyzerPlugin",
257
  /** Define environment variables */
258
  define: "DefinePlugin",
259
  /** Hot module replacement */
260
  hmr: "HotModuleReplacementPlugin",
261
  /** Named modules for development */
262
  "named-modules": "NamedModulesPlugin",
263
  /** Copy static assets */
264
  copy: "CopyWebpackPlugin",
265
  /** Workbox service worker */
266
  workbox: "GenerateSW"
267
};
268
```
269

270
### Config Output Format
271

272
The format and structure of webpack configuration output.
273

274
```typescript { .api }
275
/**
276
 * Webpack config structure when inspected:
277
 */
278
interface WebpackConfig {
279
  /** Entry points for the application */
280
  entry: {
281
    app: string[];
282
  };
283
  /** Output configuration */
284
  output: {
285
    path: string;
286
    filename: string;
287
    publicPath: string;
288
    chunkFilename: string;
289
  };
290
  /** Module resolution */
291
  resolve: {
292
    alias: Record<string, string>;
293
    extensions: string[];
294
    modules: string[];
295
  };
296
  /** Module processing rules */
297
  module: {
298
    rules: WebpackRule[];
299
  };
300
  /** Webpack plugins */
301
  plugins: WebpackPlugin[];
302
  /** Development server config */
303
  devServer?: DevServerConfig;
304
  /** Build optimization */
305
  optimization: OptimizationConfig;
306
  /** Performance settings */
307
  performance: PerformanceConfig;
308
}
309

310
interface WebpackRule {
311
  test: RegExp;
312
  use: string | object[];
313
  include?: string[];
314
  exclude?: string[];
315
}
316

317
interface WebpackPlugin {
318
  constructor: Function;
319
  options?: object;
320
}
321
```
322

323
### Development Server Integration
324

325
How the development tools integrate with vue-cli-service development server.
326

327
```typescript { .api }
328
/**
329
 * Development server features accessible through development tools:
330
 * 
331
 * - Hot Module Replacement (HMR)
332
 * - Automatic browser refresh
333
 * - Proxy configuration for API calls
334
 * - HTTPS support
335
 * - Network access configuration
336
 * - Port configuration
337
 * - Error overlay
338
 * - Progress indication
339
 */
340

341
/**
342
 * Development server configuration (in vue.config.js):
343
 */
344
interface DevServerConfig {
345
  /** Port for development server */
346
  port?: number;
347
  /** Host for development server */
348
  host?: string;
349
  /** Enable HTTPS */
350
  https?: boolean;
351
  /** Open browser automatically */
352
  open?: boolean;
353
  /** Proxy configuration for API calls */
354
  proxy?: ProxyConfig;
355
  /** Enable hot module replacement */
356
  hot?: boolean;
357
  /** Show progress during build */
358
  progress?: boolean;
359
  /** Show error overlay in browser */
360
  overlay?: boolean | ErrorOverlayOptions;
361
}
362
```