Development Tools

/**
 * Alias of "npm run serve" in the current project
 * Starts the development server with hot module replacement
 */
vue serve [options]

Options:
  All options are passed through to the underlying npm/yarn run serve command

# Start development server
vue serve

# Pass options to underlying serve command
vue serve -- --port 3000

# Works the same as:
npm run serve
# or
yarn serve

/**
 * Alias of "npm run build" in the current project
 * Builds the project for production deployment
 */
vue build [options]

Options:
  All options are passed through to the underlying npm/yarn run build command

# Build for production
vue build

# Pass options to underlying build command
vue build -- --report

# Works the same as:
npm run build
# or
yarn build

/**
 * Inspect the webpack config in a project with vue-cli-service
 * @param paths - Optional paths to inspect specific parts of config
 */
vue inspect [paths...]

Options:
  --mode <mode>                  Specify the mode (development, production, test)
  --rule <ruleName>              Inspect a specific module rule
  --plugin <pluginName>          Inspect a specific plugin
  --rules                        List all module rule names
  --plugins                      List all plugin names
  -v --verbose                   Show full function definitions in output

# Inspect entire webpack config
vue inspect

# Inspect config for production mode
vue inspect --mode production

# Inspect specific rule
vue inspect --rule vue

# Inspect specific plugin
vue inspect --plugin html

# List all available rules
vue inspect --rules

# List all available plugins  
vue inspect --plugins

# Inspect with verbose output
vue inspect --verbose

# Inspect specific path in config
vue inspect resolve.alias

# Inspect multiple paths
vue inspect module.rules output.path

/**
 * Inspect webpack configuration programmatically
 * @param paths - Config paths to inspect
 * @param options - Inspection options
 * @param context - Project directory
 */
async function inspect(
  paths?: string[],
  options?: InspectOptions,
  context?: string
): Promise<string>;

interface InspectOptions {
  /** Build mode to inspect */
  mode?: string;
  /** Specific rule name to inspect */
  rule?: string;
  /** Specific plugin name to inspect */
  plugin?: string;
  /** List all rule names */
  rules?: boolean;
  /** List all plugin names */
  plugins?: boolean;
  /** Show full function definitions */
  verbose?: boolean;
}

import { inspect } from "@vue/cli";

// Inspect entire config
const config = await inspect();
console.log(config);

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

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

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

// Inspect specific config path
const aliases = await inspect(['resolve.alias']);

/**
 * Common configuration paths for inspection:
 */
const commonPaths = {
  /** Entry points configuration */
  entry: "entry",
  /** Output configuration */
  output: "output",
  /** Module resolution settings */
  resolve: "resolve",
  /** Module rules for file processing */  
  moduleRules: "module.rules",
  /** Webpack plugins */
  plugins: "plugins",
  /** Development server settings */
  devServer: "devServer",
  /** Optimization settings */
  optimization: "optimization",
  /** Performance settings */
  performance: "performance",
  /** External dependencies */
  externals: "externals",
  /** Resolve aliases */
  aliases: "resolve.alias",
  /** Extensions resolution order */
  extensions: "resolve.extensions"
};

/**
 * Common webpack rule names in Vue CLI projects:
 */
const commonRules = {
  /** Vue single file component processing */
  vue: "vue",
  /** JavaScript/TypeScript processing with Babel */
  js: "js", 
  /** TypeScript processing */
  ts: "ts",
  /** CSS processing */
  css: "css",
  /** PostCSS processing */
  postcss: "postcss",
  /** Sass/SCSS processing */
  scss: "scss",
  /** Less processing */
  less: "less",
  /** Stylus processing */
  stylus: "stylus",
  /** Image file processing */
  images: "images",
  /** SVG file processing */
  svg: "svg",
  /** Media file processing */
  media: "media",
  /** Font file processing */
  fonts: "fonts",
  /** ESLint linting */
  eslint: "eslint"
};

/**
 * Common webpack plugin names in Vue CLI projects:
 */
const commonPlugins = {
  /** Vue loader plugin */
  "vue-loader": "VueLoaderPlugin",
  /** HTML generation */
  html: "HtmlWebpackPlugin",
  /** CSS extraction */
  "extract-css": "MiniCssExtractPlugin",
  /** Progressive web app manifest */
  pwa: "GenerateSW",
  /** Bundle analysis */
  "bundle-analyzer": "BundleAnalyzerPlugin",
  /** Define environment variables */
  define: "DefinePlugin",
  /** Hot module replacement */
  hmr: "HotModuleReplacementPlugin",
  /** Named modules for development */
  "named-modules": "NamedModulesPlugin",
  /** Copy static assets */
  copy: "CopyWebpackPlugin",
  /** Workbox service worker */
  workbox: "GenerateSW"
};

/**
 * Webpack config structure when inspected:
 */
interface WebpackConfig {
  /** Entry points for the application */
  entry: {
    app: string[];
  };
  /** Output configuration */
  output: {
    path: string;
    filename: string;
    publicPath: string;
    chunkFilename: string;
  };
  /** Module resolution */
  resolve: {
    alias: Record<string, string>;
    extensions: string[];
    modules: string[];
  };
  /** Module processing rules */
  module: {
    rules: WebpackRule[];
  };
  /** Webpack plugins */
  plugins: WebpackPlugin[];
  /** Development server config */
  devServer?: DevServerConfig;
  /** Build optimization */
  optimization: OptimizationConfig;
  /** Performance settings */
  performance: PerformanceConfig;
}

interface WebpackRule {
  test: RegExp;
  use: string | object[];
  include?: string[];
  exclude?: string[];
}

interface WebpackPlugin {
  constructor: Function;
  options?: object;
}

/**
 * Development server features accessible through development tools:
 * 
 * - Hot Module Replacement (HMR)
 * - Automatic browser refresh
 * - Proxy configuration for API calls
 * - HTTPS support
 * - Network access configuration
 * - Port configuration
 * - Error overlay
 * - Progress indication
 */

/**
 * Development server configuration (in vue.config.js):
 */
interface DevServerConfig {
  /** Port for development server */
  port?: number;
  /** Host for development server */
  host?: string;
  /** Enable HTTPS */
  https?: boolean;
  /** Open browser automatically */
  open?: boolean;
  /** Proxy configuration for API calls */
  proxy?: ProxyConfig;
  /** Enable hot module replacement */
  hot?: boolean;
  /** Show progress during build */
  progress?: boolean;
  /** Show error overlay in browser */
  overlay?: boolean | ErrorOverlayOptions;
}