Configuration Generation

/**
 * Generate complete webpack configuration
 * @param opts - Configuration generation options
 * @returns Complete webpack configuration object
 */
function getConfig(opts: WebpackConfigOptions): object;

interface WebpackConfigOptions {
  cwd?: string;
  entry?: { [key: string]: string | string[] };
  outputPath?: string;
  publicPath?: string;
  isDev?: boolean;
  alias?: { [key: string]: string };
  externals?: object;
  babel?: BabelOptions;
  extraBabelPresets?: string[];
  extraBabelPlugins?: string[];
  extraBabelIncludes?: (string | Function)[];
  disableDynamicImport?: boolean;
  typescript?: object;
  tsConfigFile?: string;
  chainConfig?: (config: object) => void;
  copy?: string | object | Array<string | object>;
  theme?: object;
  lessLoaderOptions?: object;
  sass?: object;
  stylus?: object;
  autoprefixer?: object;
  extraPostCSSPlugins?: object[];
  cssModulesExcludes?: string[];
  cssModulesWithAffix?: boolean;
  disableCSSModules?: boolean;
  disableCSSSourceMap?: boolean;
  cssLoaderVersion?: string;
  cssLoaderOptions?: object;
  cssPublicPath?: string;
  styleLoader?: object;
  cssnano?: object;
  hash?: boolean;
  minimizer?: 'uglifyjs' | 'terserjs';
  uglifyJSOptions?: object;
  terserJSOptions?: object;
  devtool?: string;
  define?: object;
  ignoreMomentLocale?: boolean;
  inlineLimit?: number;
  urlLoaderExcludes?: string[];
  manifest?: object;
  generateCssModulesTypings?: boolean;
  browserslist?: string[];
  es5ImcompatibleVersions?: string[];
  [key: string]: any;
}

interface BabelOptions {
  presets?: string[];
  plugins?: string[];
}

const getConfig = require('af-webpack/getConfig');

// Basic configuration
const config = getConfig({
  cwd: process.cwd(),
  entry: {
    index: './src/index.js'
  },
  outputPath: 'dist',
  publicPath: '/'
});

// Advanced configuration with TypeScript and CSS modules
const advancedConfig = getConfig({
  cwd: process.cwd(),
  entry: {
    app: './src/app.tsx',
    vendor: ['react', 'react-dom']
  },
  outputPath: 'build',
  publicPath: '/static/',
  typescript: {
    strict: true,
    target: 'ES2018'
  },
  tsConfigFile: './tsconfig.build.json',
  theme: {
    'primary-color': '#1890ff',
    'border-radius-base': '4px'
  },
  lessLoaderOptions: {
    javascriptEnabled: true
  },
  alias: {
    '@': './src',
    'components': './src/components'
  },
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  },
  chainConfig: (config) => {
    // Custom webpack-chain modifications
    config.plugin('custom').use(CustomPlugin, [options]);
  }
});

// Single entry
entry: './src/index.js'

// Multiple entries
entry: {
  app: './src/app.js',
  admin: './src/admin.js',
  vendor: ['react', 'lodash']
}

// Array entries (for multiple files per entry)
entry: {
  app: ['./src/polyfills.js', './src/app.js']
}

// Babel configuration
babel: {
  presets: ['@babel/preset-env', '@babel/preset-react'],
  plugins: ['@babel/plugin-proposal-class-properties']
}

// Additional Babel configuration
extraBabelPresets: ['@babel/preset-typescript']
extraBabelPlugins: [
  ['import', { libraryName: 'antd', style: true }]
]

// Include additional files for Babel transformation
extraBabelIncludes: [
  './node_modules/some-es6-package',
  (path) => path.includes('es6-modules')
]

// Browser support configuration
browserslist: [
  '> 1%',
  'last 2 versions',
  'not dead'
]

// ES5 compatibility enforcement
es5ImcompatibleVersions: true  // Enable automatic ES5 transforms for incompatible packages

// TypeScript configuration
typescript: {
  strict: true,
  target: 'ES2018',
  lib: ['ES2018', 'DOM']
}
tsConfigFile: './tsconfig.json'

// CSS Modules configuration
cssModulesExcludes: ['./src/global.css']
cssModulesWithAffix: true
disableCSSModules: false
generateCssModulesTypings: true  // Generate TypeScript definitions for CSS modules

// CSS Loader configuration
cssLoaderVersion: 2  // Choose CSS loader version (1 or 2)
cssLoaderOptions: {
  modules: true,
  localIdentName: '[local]--[hash:base64:5]'
}
disableCSSSourceMap: false  // Control CSS source map generation

// CSS output configuration
cssPublicPath: './'  // Public path for CSS assets
styleLoader: {
  hmr: true,
  sourceMap: true
}

// CSS preprocessing
theme: {
  'primary-color': '#1890ff',
  'font-size-base': '14px'
}

lessLoaderOptions: {
  javascriptEnabled: true,
  modifyVars: { '@primary-color': '#1890ff' }
}

sass: {
  implementation: require('sass')
}

stylus: {
  preferPathResolver: 'webpack'
}

// PostCSS configuration
autoprefixer: {
  browsers: ['> 1%', 'last 2 versions']
}

extraPostCSSPlugins: [
  require('postcss-flexbugs-fixes')
]

// CSS optimization
cssnano: {
  preset: ['default', { discardComments: { removeAll: true } }]
}

// Asset copying
copy: [
  { from: './public', to: './dist' },
  './assets/**/*'
]

// URL loader configuration
inlineLimit: 10000  // Inline files smaller than 10KB
urlLoaderExcludes: [/\.pdf$/]

// Static file handling
alias: {
  '@': './src',
  'assets': './src/assets'
}

// Dynamic import configuration
disableDynamicImport: false  // Enable code splitting

// Minification
minimizer: 'terserjs'  // or 'uglifyjs'
terserJSOptions: {
  compress: { drop_console: true }
}

// External dependencies
externals: {
  'react': 'React',
  'lodash': '_'
}

// Source maps
devtool: 'cheap-module-eval-source-map'

// Global constants
define: {
  'process.env.NODE_ENV': JSON.stringify('development'),
  'API_BASE_URL': JSON.stringify('http://localhost:3000')
}

// Bundle analysis
// Set ANALYZE=1 environment variable to enable

chainConfig: (config) => {
  // Modify webpack configuration using webpack-chain API
  config
    .plugin('custom-plugin')
    .use(CustomPlugin, [{ option: 'value' }]);
  
  config.module
    .rule('custom-loader')
    .test(/\.custom$/)
    .use('custom-loader')
    .loader('custom-loader')
    .options({ customOption: true });
}