packlyze 3.0.3 → 3.0.6

package/dist/analyzer/packlyze.d.ts

@@ -9,6 +9,23 @@ export declare class Packlyze {
      * Automatically detect entry point by scanning common locations
      */
     private detectEntryPoint;
+    /**
+     * Extract TypeScript path aliases from tsconfig.json
+     * Note: Does not handle "extends" - only reads the direct tsconfig.json file
+     */
+    private getTypeScriptPathAliases;
+    /**
+     * Check if webpack config file exists and detect project type
+     */
+    private checkWebpackConfig;
+    /**
+     * Generate webpack config template based on project type
+     */
+    private generateWebpackConfig;
+    /**
+     * Automatically create webpack config file
+     */
+    private createWebpackConfig;
     private loadStats;
     private validateStats;
     analyze(): Promise<AnalysisResult>;

package/dist/analyzer/packlyze.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"packlyze.d.ts","sourceRoot":"","sources":["../../src/analyzer/packlyze.ts"],"names":[],"mappings":"AAEA,OAAO,EAUL,cAAc,EACf,MAAM,aAAa,CAAC;AAErB,qBAAa,QAAQ;IACnB,OAAO,CAAC,SAAS,CAcV;IACP,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAC,CAA4B;gBAEnC,SAAS,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI;IASrE,OAAO,CAAC,GAAG;IAMX;;OAEG;IACH,OAAO,CAAC,gBAAgB;IA6ExB,OAAO,CAAC,SAAS;IA8BjB,OAAO,CAAC,aAAa;IAmGf,OAAO,IAAI,OAAO,CAAC,cAAc,CAAC;IAuCxC,OAAO,CAAC,kBAAkB;IAqG1B,OAAO,CAAC,YAAY;IA2CpB,OAAO,CAAC,gBAAgB;IAuCxB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,uBAAuB;IAkD/B,OAAO,CAAC,uBAAuB;IAmB/B;;;;;;OAMG;IACH,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,cAAc;IAoCtB,OAAO,CAAC,eAAe;IAqCvB,OAAO,CAAC,mBAAmB;IAkD3B,OAAO,CAAC,aAAa;IAgErB,OAAO,CAAC,gBAAgB;CAuBzB"}
+{"version":3,"file":"packlyze.d.ts","sourceRoot":"","sources":["../../src/analyzer/packlyze.ts"],"names":[],"mappings":"AAEA,OAAO,EAUL,cAAc,EACf,MAAM,aAAa,CAAC;AAErB,qBAAa,QAAQ;IACnB,OAAO,CAAC,SAAS,CAcV;IACP,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAC,CAA4B;gBAEnC,SAAS,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI;IASrE,OAAO,CAAC,GAAG;IAMX;;OAEG;IACH,OAAO,CAAC,gBAAgB;IA6ExB;;;OAGG;IACH,OAAO,CAAC,wBAAwB;IA0GhC;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAsE1B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IA6L7B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IA4D3B,OAAO,CAAC,SAAS;IA6DjB,OAAO,CAAC,aAAa;IA+Pf,OAAO,IAAI,OAAO,CAAC,cAAc,CAAC;IAuCxC,OAAO,CAAC,kBAAkB;IAqG1B,OAAO,CAAC,YAAY;IA2CpB,OAAO,CAAC,gBAAgB;IAuCxB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,uBAAuB;IAkD/B,OAAO,CAAC,uBAAuB;IAmB/B;;;;;;OAMG;IACH,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,cAAc;IAoCtB,OAAO,CAAC,eAAe;IAqCvB,OAAO,CAAC,mBAAmB;IAkD3B,OAAO,CAAC,aAAa;IAgErB,OAAO,CAAC,gBAAgB;CAuBzB"}

package/dist/analyzer/packlyze.js

@@ -88,11 +88,423 @@ class Packlyze {
         }
         return null;
     }
+    /**
+     * Extract TypeScript path aliases from tsconfig.json
+     * Note: Does not handle "extends" - only reads the direct tsconfig.json file
+     */
+    getTypeScriptPathAliases() {
+        const possibleRoots = [
+            this.baseDir, // stats.json in project root
+            path_1.default.dirname(this.baseDir) // stats.json in subdirectory
+        ];
+        for (const projectRoot of possibleRoots) {
+            const tsconfigPath = path_1.default.join(projectRoot, 'tsconfig.json');
+            if (fs_1.default.existsSync(tsconfigPath)) {
+                try {
+                    const tsconfigContent = fs_1.default.readFileSync(tsconfigPath, 'utf-8');
+                    // Remove comments (simple regex-based approach)
+                    // Note: This is a basic implementation and may not handle all edge cases
+                    // For production, consider using a proper JSONC parser
+                    const cleanedContent = tsconfigContent.replace(/\/\*[\s\S]*?\*\/|\/\/.*/g, '');
+                    const tsconfig = JSON.parse(cleanedContent);
+                    // Check if tsconfig uses "extends" - we can't resolve that without additional tooling
+                    if (tsconfig.extends) {
+                        this.log(`Note: tsconfig.json uses "extends" - path aliases from extended configs are not automatically resolved`);
+                    }
+                    const paths = tsconfig.compilerOptions?.paths;
+                    if (paths && typeof paths === 'object') {
+                        const aliases = {};
+                        for (const [alias, pathArray] of Object.entries(paths)) {
+                            // Validate alias key
+                            if (!alias || typeof alias !== 'string') {
+                                continue;
+                            }
+                            if (Array.isArray(pathArray) && pathArray.length > 0) {
+                                // Take the first path mapping
+                                let mappedPath = pathArray[0];
+                                // Validate mapped path
+                                if (!mappedPath || typeof mappedPath !== 'string') {
+                                    continue;
+                                }
+                                // Remove wildcards from both alias and mapped path
+                                // TypeScript: "@/*": ["src/*"] -> webpack: "@": "src"
+                                // TypeScript: "@/components/*": ["src/components/*"] -> webpack: "@/components": "src/components"
+                                const aliasKey = alias.replace(/\*$/, '');
+                                // Skip empty alias keys
+                                if (!aliasKey) {
+                                    continue;
+                                }
+                                if (mappedPath.includes('*')) {
+                                    mappedPath = mappedPath.replace(/\*$/, '');
+                                }
+                                // Skip empty mapped paths
+                                if (!mappedPath) {
+                                    continue;
+                                }
+                                // Resolve the mapped path relative to tsconfig.json location
+                                // The path in tsconfig is relative to the tsconfig.json file location
+                                // If the path doesn't start with . or /, it's relative to baseUrl or tsconfig location
+                                let resolvedPath;
+                                if (path_1.default.isAbsolute(mappedPath)) {
+                                    resolvedPath = mappedPath;
+                                }
+                                else {
+                                    // Check if there's a baseUrl in tsconfig
+                                    const baseUrl = tsconfig.compilerOptions?.baseUrl;
+                                    if (baseUrl && typeof baseUrl === 'string') {
+                                        const baseUrlPath = path_1.default.isAbsolute(baseUrl)
+                                            ? baseUrl
+                                            : path_1.default.resolve(path_1.default.dirname(tsconfigPath), baseUrl);
+                                        resolvedPath = path_1.default.resolve(baseUrlPath, mappedPath);
+                                    }
+                                    else {
+                                        resolvedPath = path_1.default.resolve(path_1.default.dirname(tsconfigPath), mappedPath);
+                                    }
+                                }
+                                // Validate that the resolved path exists (or at least the directory)
+                                const resolvedDir = path_1.default.dirname(resolvedPath);
+                                if (!fs_1.default.existsSync(resolvedDir)) {
+                                    this.log(`Warning: Path alias "${aliasKey}" resolves to non-existent directory: ${resolvedDir}`);
+                                    // Continue anyway - webpack will handle the error
+                                }
+                                // Store the absolute path - we'll make it relative in the webpack config generation
+                                aliases[aliasKey] = resolvedPath;
+                            }
+                        }
+                        if (Object.keys(aliases).length > 0) {
+                            this.log(`Found ${Object.keys(aliases).length} TypeScript path alias(es) in tsconfig.json`);
+                            return aliases;
+                        }
+                    }
+                }
+                catch (error) {
+                    // Silently fail - tsconfig might be invalid or use extends
+                    this.log(`Could not parse tsconfig.json: ${error}`);
+                }
+            }
+        }
+        return {};
+    }
+    /**
+     * Check if webpack config file exists and detect project type
+     */
+    checkWebpackConfig() {
+        const configNames = ['webpack.config.js', 'webpack.config.cjs', 'webpack.config.ts'];
+        // Try project root (same directory as stats.json) or one level up
+        const possibleRoots = [
+            this.baseDir, // stats.json in project root
+            path_1.default.dirname(this.baseDir) // stats.json in subdirectory
+        ];
+        // First, check project type
+        const projectRoot = possibleRoots[0];
+        const packageJsonPath = path_1.default.join(projectRoot, 'package.json');
+        let isESModule = false;
+        let hasTypeScript = false;
+        let framework = null;
+        if (fs_1.default.existsSync(packageJsonPath)) {
+            try {
+                const pkg = JSON.parse(fs_1.default.readFileSync(packageJsonPath, 'utf-8'));
+                isESModule = pkg.type === 'module';
+                const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+                if (deps.react || deps['react-dom']) {
+                    framework = 'react';
+                }
+                else if (deps.vue || deps['@vue/cli-service']) {
+                    framework = 'vue';
+                }
+                else if (deps['@angular/core']) {
+                    framework = 'angular';
+                }
+                hasTypeScript = !!deps.typescript || fs_1.default.existsSync(path_1.default.join(projectRoot, 'tsconfig.json'));
+            }
+            catch {
+                // Ignore parse errors
+            }
+        }
+        const correctFileName = isESModule ? 'webpack.config.cjs' : 'webpack.config.js';
+        // Now check for existing config files
+        for (const projectRoot of possibleRoots) {
+            for (const name of configNames) {
+                const configPath = path_1.default.join(projectRoot, name);
+                if (fs_1.default.existsSync(configPath)) {
+                    // Check if the config file has the wrong extension for this project type
+                    const wrongExtension = isESModule && name === 'webpack.config.js';
+                    return {
+                        exists: true,
+                        path: configPath,
+                        isESModule,
+                        hasTypeScript,
+                        framework,
+                        wrongExtension,
+                        correctFileName
+                    };
+                }
+            }
+        }
+        // Config not found
+        return {
+            exists: false,
+            path: null,
+            isESModule,
+            hasTypeScript,
+            framework,
+            wrongExtension: false,
+            correctFileName
+        };
+    }
+    /**
+     * Generate webpack config template based on project type
+     */
+    generateWebpackConfig(entryPoint, isESModule, hasTypeScript, framework) {
+        const useTypeScript = hasTypeScript;
+        const isReact = framework === 'react';
+        // Get TypeScript path aliases if available
+        const pathAliases = hasTypeScript ? this.getTypeScriptPathAliases() : {};
+        const hasAliases = Object.keys(pathAliases).length > 0;
+        // Generate alias configuration string
+        let aliasConfig = '';
+        if (hasAliases) {
+            // Determine the project root (where webpack.config will be)
+            const projectRoot = this.baseDir;
+            const aliasEntries = Object.entries(pathAliases)
+                .map(([key, absolutePath]) => {
+                // Escape single quotes in the key if present
+                const escapedKey = key.replace(/'/g, "\\'");
+                // Make the path relative to the project root (where webpack.config will be)
+                let relativePath = path_1.default.relative(projectRoot, absolutePath);
+                // Handle edge case: if paths are the same, use '.'
+                if (!relativePath || relativePath === '') {
+                    relativePath = '.';
+                }
+                // Handle edge case: if path goes outside project root, use absolute path
+                // This can happen with complex baseUrl configurations
+                if (relativePath.startsWith('..')) {
+                    // Use absolute path resolution
+                    const normalizedAbsolute = absolutePath.replace(/\\/g, '/');
+                    return `    '${escapedKey}': '${normalizedAbsolute}'`;
+                }
+                // Normalize path separators for cross-platform compatibility
+                const normalizedPath = relativePath.replace(/\\/g, '/');
+                // Escape any single quotes in the path
+                const escapedPath = normalizedPath.replace(/'/g, "\\'");
+                // Use path.resolve(__dirname, ...) to ensure correct resolution
+                // __dirname in webpack config will be the project root
+                return `    '${escapedKey}': path.resolve(__dirname, '${escapedPath}')`;
+            })
+                .join(',\n');
+            aliasConfig = `,\n    alias: {\n${aliasEntries}\n    }`;
+        }
+        let config = '';
+        if (isESModule) {
+            // CommonJS config for ES module projects
+            config = `const path = require('path');
+
+module.exports = {
+  entry: '${entryPoint}',
+  
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  
+  resolve: {
+    extensions: ['.js', '.jsx'${useTypeScript ? ", '.ts', '.tsx'" : ''}]${aliasConfig},
+  },
+  
+  module: {
+    rules: [
+`;
+            if (useTypeScript) {
+                config += `      {
+        test: /\\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'ts-loader',
+          options: {
+            transpileOnly: true
+          }
+        }
+      },
+`;
+            }
+            if (isReact && !useTypeScript) {
+                config += `      {
+        test: /\\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react']
+          }
+        }
+      },
+`;
+            }
+            config += `      {
+        test: /\\.(png|jpg|jpeg|gif|svg)$/,
+        type: 'asset/resource'
+      }
+    ]
+  },
+  
+  mode: 'production',
+  
+  stats: {
+    modules: true,
+    chunks: true,
+    chunkModules: true,
+    chunkOrigins: true,
+    assets: true,
+    entrypoints: true
+  }
+};
+`;
+        }
+        else {
+            // Standard CommonJS config
+            config = `const path = require('path');
+
+module.exports = {
+  entry: '${entryPoint}',
+  
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  
+  resolve: {
+    extensions: ['.js', '.jsx'${useTypeScript ? ", '.ts', '.tsx'" : ''}]${aliasConfig},
+  },
+  
+  module: {
+    rules: [
+`;
+            if (useTypeScript) {
+                config += `      {
+        test: /\\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'ts-loader',
+          options: {
+            transpileOnly: true
+          }
+        }
+      },
+`;
+            }
+            if (isReact && !useTypeScript) {
+                config += `      {
+        test: /\\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react']
+          }
+        }
+      },
+`;
+            }
+            config += `      {
+        test: /\\.(png|jpg|jpeg|gif|svg)$/,
+        type: 'asset/resource'
+      }
+    ]
+  },
+  
+  mode: 'production',
+  
+  stats: {
+    modules: true,
+    chunks: true,
+    chunkModules: true,
+    chunkOrigins: true,
+    assets: true,
+    entrypoints: true
+  }
+};
+`;
+        }
+        return config;
+    }
+    /**
+     * Automatically create webpack config file
+     */
+    createWebpackConfig(entryPoint, isESModule, hasTypeScript, framework) {
+        const projectRoot = this.baseDir; // Use stats.json directory as project root
+        // Validate project root exists and is writable
+        if (!fs_1.default.existsSync(projectRoot)) {
+            throw new Error(`Project root directory does not exist: ${projectRoot}`);
+        }
+        const stats = fs_1.default.statSync(projectRoot);
+        if (!stats.isDirectory()) {
+            throw new Error(`Project root is not a directory: ${projectRoot}`);
+        }
+        const configFileName = isESModule ? 'webpack.config.cjs' : 'webpack.config.js';
+        const configPath = path_1.default.join(projectRoot, configFileName);
+        // Check if file already exists
+        if (fs_1.default.existsSync(configPath)) {
+            // Check if it's actually a file (not a directory)
+            const existingStats = fs_1.default.statSync(configPath);
+            if (!existingStats.isFile()) {
+                throw new Error(`Path exists but is not a file: ${configPath}`);
+            }
+            this.log(`Webpack config already exists at ${configPath}`);
+            return configPath; // Return existing path
+        }
+        // Validate entry point exists
+        const entryPointPath = path_1.default.isAbsolute(entryPoint)
+            ? entryPoint
+            : path_1.default.join(projectRoot, entryPoint);
+        if (!fs_1.default.existsSync(entryPointPath)) {
+            this.log(`Warning: Entry point does not exist: ${entryPointPath}`);
+            // Continue anyway - webpack will handle the error
+        }
+        // Generate config content
+        const configContent = this.generateWebpackConfig(entryPoint, isESModule, hasTypeScript, framework);
+        // Write config file
+        try {
+            fs_1.default.writeFileSync(configPath, configContent, 'utf-8');
+            this.log(`Created ${configFileName} at ${configPath}`);
+            return configPath;
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            this.log(`Failed to create ${configFileName}: ${errorMessage}`);
+            // Provide helpful error message
+            if (errorMessage.includes('EACCES') || errorMessage.includes('permission')) {
+                throw new Error(`Permission denied: Cannot write to ${configPath}\n💡 Check file permissions or run with appropriate privileges`);
+            }
+            if (errorMessage.includes('ENOSPC')) {
+                throw new Error(`No space left on device: Cannot write ${configPath}`);
+            }
+            throw new Error(`Failed to create webpack config: ${errorMessage}`);
+        }
+    }
     loadStats(statsPath) {
         this.log('Reading stats file...');
-        const content = fs_1.default.readFileSync(statsPath, 'utf-8');
-        this.log(`Stats file size: ${(content.length / 1024).toFixed(2)} KB`);
+        // Check if file exists and is readable
+        if (!fs_1.default.existsSync(statsPath)) {
+            throw new Error(`Stats file not found: ${statsPath}`);
+        }
+        // Check if it's a file (not a directory)
+        const stats = fs_1.default.statSync(statsPath);
+        if (!stats.isFile()) {
+            throw new Error(`Path is not a file: ${statsPath}`);
+        }
+        // Check file size (warn if very large)
+        const fileSizeKB = stats.size / 1024;
+        const fileSizeMB = fileSizeKB / 1024;
+        this.log(`Stats file size: ${fileSizeKB.toFixed(2)} KB`);
+        if (fileSizeMB > 100) {
+            this.log(`Warning: Stats file is very large (${fileSizeMB.toFixed(2)} MB). Parsing may take a while...`);
+        }
         try {
+            const content = fs_1.default.readFileSync(statsPath, 'utf-8');
+            // Check if file is empty
+            if (!content || content.trim().length === 0) {
+                throw new Error('Stats file is empty');
+            }
             this.log('Parsing JSON...');
             this.statsData = JSON.parse(content);
             this.log('Validating stats structure...');
@@ -109,10 +521,16 @@ class Packlyze {
             this.log(`Found ${topLevelModules} top-level modules, ${chunkModules} modules in chunks, ${chunks.length} chunks`);
         }
         catch (e) {
+            if (e instanceof SyntaxError) {
+                throw new Error(`Invalid JSON in stats file: ${e.message}\n💡 Make sure the stats file was generated correctly (e.g., webpack --profile --json stats.json)`);
+            }
             if (e instanceof Error && e.message.includes('Invalid stats')) {
                 throw e;
             }
-            throw new Error(`Invalid JSON in stats file: ${e}`);
+            if (e instanceof Error && e.message.includes('empty')) {
+                throw e;
+            }
+            throw new Error(`Error reading stats file: ${e instanceof Error ? e.message : String(e)}`);
         }
     }
     validateStats() {
@@ -131,24 +549,132 @@ class Packlyze {
             // Check for entry point resolution errors and auto-detect entry files
             const entryPointError = errors.find(e => e.message?.includes("Can't resolve") &&
                 (e.message.includes('./src') || e.message.includes("'./src'") || e.message.includes('"./src"')));
+            // Check for ES module config loading errors
+            const esModuleConfigError = errors.find(e => e.message?.includes('require is not defined in ES module scope') ||
+                e.message?.includes('To treat it as a CommonJS script, rename it to use the \'.cjs\' file extension'));
             let suggestion = '';
-            if (entryPointError) {
+            if (esModuleConfigError) {
+                // ES module config loading error - config has wrong extension
+                const configCheck = this.checkWebpackConfig();
+                const detectedEntry = this.detectEntryPoint();
+                const entryPoint = detectedEntry || './src/index.js';
+                try {
+                    // Automatically create the correct config file
+                    this.createWebpackConfig(entryPoint, configCheck.isESModule, configCheck.hasTypeScript, configCheck.framework);
+                    const currentFileName = configCheck.path ? path_1.default.basename(configCheck.path) : 'webpack.config.js';
+                    suggestion = `\n\n✅ Created ${configCheck.correctFileName} automatically!\n\n` +
+                        `Your project uses ES modules, so webpack needs ${configCheck.correctFileName} instead of ${currentFileName}.\n\n` +
+                        `🔍 Auto-detected entry point: ${entryPoint}\n` +
+                        `📦 Project type: ${configCheck.framework || 'Generic'}${configCheck.hasTypeScript ? ' + TypeScript' : ''} (ES Modules)\n\n` +
+                        `💡 Next steps:\n`;
+                    if (configCheck.hasTypeScript) {
+                        suggestion += `   1. Install required loaders: npm install --save-dev ts-loader typescript\n`;
+                    }
+                    if (configCheck.framework === 'react' && !configCheck.hasTypeScript) {
+                        suggestion += `   1. Install required loaders: npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react\n`;
+                    }
+                    suggestion += `   2. Regenerate stats.json: npx webpack --profile --json stats.json\n`;
+                }
+                catch (error) {
+                    // If creation fails, fall back to manual instructions
+                    const configTemplate = this.generateWebpackConfig(entryPoint, configCheck.isESModule, configCheck.hasTypeScript, configCheck.framework);
+                    const currentFileName = configCheck.path ? path_1.default.basename(configCheck.path) : 'webpack.config.js';
+                    suggestion = `\n\n⚠️  Webpack config file has wrong extension!\n\n` +
+                        `Your project uses ES modules (package.json has "type": "module"), but you have ${currentFileName}.\n` +
+                        `Webpack can't load CommonJS config files (.js) in ES module projects.\n\n` +
+                        `🔍 Auto-detected entry point: ${entryPoint}\n` +
+                        `📦 Project type: ${configCheck.framework || 'Generic'}${configCheck.hasTypeScript ? ' + TypeScript' : ''} (ES Modules)\n\n` +
+                        `Create ${configCheck.correctFileName} with the following content:\n\n` +
+                        `\`\`\`javascript\n${configTemplate}\`\`\`\n\n` +
+                        `💡 After creating the config file, regenerate stats.json:\n` +
+                        `   npx webpack --profile --json stats.json\n`;
+                }
+            }
+            else if (entryPointError) {
+                const configCheck = this.checkWebpackConfig();
                 const detectedEntry = this.detectEntryPoint();
-                if (detectedEntry) {
+                if (!configCheck.exists) {
+                    // Webpack config doesn't exist - automatically create it
+                    const entryPoint = detectedEntry || './src/index.js';
+                    try {
+                        this.createWebpackConfig(entryPoint, configCheck.isESModule, configCheck.hasTypeScript, configCheck.framework);
+                        suggestion = `\n\n✅ Created ${configCheck.correctFileName} automatically!\n\n` +
+                            `🔍 Auto-detected entry point: ${entryPoint}\n` +
+                            `📦 Project type: ${configCheck.framework || 'Generic'}${configCheck.hasTypeScript ? ' + TypeScript' : ''}${configCheck.isESModule ? ' (ES Modules)' : ''}\n\n` +
+                            `💡 Next steps:\n`;
+                        if (configCheck.hasTypeScript) {
+                            suggestion += `   1. Install required loaders: npm install --save-dev ts-loader typescript\n`;
+                        }
+                        if (configCheck.framework === 'react' && !configCheck.hasTypeScript) {
+                            suggestion += `   1. Install required loaders: npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react\n`;
+                        }
+                        suggestion += `   2. Regenerate stats.json: npx webpack --profile --json stats.json\n`;
+                    }
+                    catch (error) {
+                        // If creation fails, fall back to manual instructions
+                        const configTemplate = this.generateWebpackConfig(entryPoint, configCheck.isESModule, configCheck.hasTypeScript, configCheck.framework);
+                        suggestion = `\n\n📝 Webpack config file not found!\n\n` +
+                            `🔍 Auto-detected entry point: ${entryPoint}\n` +
+                            `📦 Project type: ${configCheck.framework || 'Generic'}${configCheck.hasTypeScript ? ' + TypeScript' : ''}${configCheck.isESModule ? ' (ES Modules)' : ''}\n\n` +
+                            `Create ${configCheck.correctFileName} with the following content:\n\n` +
+                            `\`\`\`javascript\n${configTemplate}\`\`\`\n\n` +
+                            `💡 After creating the config file, install required loaders:\n`;
+                        if (configCheck.hasTypeScript) {
+                            suggestion += `   npm install --save-dev ts-loader typescript\n`;
+                        }
+                        if (configCheck.framework === 'react' && !configCheck.hasTypeScript) {
+                            suggestion += `   npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react\n`;
+                        }
+                        suggestion += `\n   Then regenerate stats.json:\n` +
+                            `   npx webpack --profile --json stats.json\n`;
+                    }
+                }
+                else if (configCheck.wrongExtension) {
+                    // Config exists but has wrong extension - create the correct one
+                    const entryPoint = detectedEntry || './src/index.js';
+                    try {
+                        this.createWebpackConfig(entryPoint, configCheck.isESModule, configCheck.hasTypeScript, configCheck.framework);
+                        const currentFileName = path_1.default.basename(configCheck.path || 'webpack.config.js');
+                        suggestion = `\n\n✅ Created ${configCheck.correctFileName} automatically!\n\n` +
+                            `Your project uses ES modules, so webpack needs ${configCheck.correctFileName} instead of ${currentFileName}.\n\n` +
+                            `🔍 Auto-detected entry point: ${entryPoint}\n` +
+                            `📦 Project type: ${configCheck.framework || 'Generic'}${configCheck.hasTypeScript ? ' + TypeScript' : ''} (ES Modules)\n\n` +
+                            `💡 Next steps:\n` +
+                            `   1. You can delete ${currentFileName} if you no longer need it\n` +
+                            `   2. Regenerate stats.json: npx webpack --profile --json stats.json\n`;
+                    }
+                    catch (error) {
+                        // If creation fails, fall back to manual instructions
+                        const configTemplate = this.generateWebpackConfig(entryPoint, configCheck.isESModule, configCheck.hasTypeScript, configCheck.framework);
+                        const currentFileName = path_1.default.basename(configCheck.path || 'webpack.config.js');
+                        suggestion = `\n\n⚠️  Webpack config file has wrong extension!\n\n` +
+                            `Your project uses ES modules (package.json has "type": "module"), but you have ${currentFileName}.\n` +
+                            `Webpack can't load CommonJS config files (.js) in ES module projects.\n\n` +
+                            `🔍 Auto-detected entry point: ${entryPoint}\n` +
+                            `📦 Project type: ${configCheck.framework || 'Generic'}${configCheck.hasTypeScript ? ' + TypeScript' : ''} (ES Modules)\n\n` +
+                            `Create ${configCheck.correctFileName} with the following content:\n\n` +
+                            `\`\`\`javascript\n${configTemplate}\`\`\`\n\n` +
+                            `💡 After creating the config file, regenerate stats.json:\n` +
+                            `   npx webpack --profile --json stats.json\n`;
+                    }
+                }
+                else if (detectedEntry) {
+                    // Config exists and extension is correct, but entry point is wrong
                     suggestion = `\n\n🔍 Auto-detected entry point: ${detectedEntry}\n` +
-                        `   Update your webpack.config.js:\n` +
+                        `   Update your ${path_1.default.basename(configCheck.path || 'webpack.config.js')}:\n` +
                         `   entry: '${detectedEntry}',\n`;
                 }
                 else {
                     suggestion = `\n\n💡 Tip: Your entry point should be a FILE, not a directory.\n` +
-                        `   Common entry points: ./src/App.tsx, ./src/index.jsx, ./src/main.js\n`;
+                        `   Common entry points: ./src/App.tsx, ./src/index.jsx, ./src/main.js\n` +
+                        `   Update the 'entry' field in your webpack config.\n`;
                 }
             }
             throw new Error(`Webpack build failed with ${errors.length} error(s). Cannot analyze bundle.\n\n` +
                 `Errors:\n   ${errorMessages}${errors.length > 3 ? `\n   ... and ${errors.length - 3} more error(s)` : ''}` +
                 suggestion +
-                `\n💡 Fix the webpack build errors first, then regenerate stats.json:\n` +
-                `   npx webpack --profile --json stats.json`);
+                (suggestion ? '' : `\n💡 Fix the webpack build errors first, then regenerate stats.json:\n` +
+                    `   npx webpack --profile --json stats.json`));
         }
         // Check for required structure (at least one of assets, modules, or chunks should exist)
         const hasAssets = Array.isArray(this.statsData.assets);