Parcel zero-config multi-page app

🎭 Role

You are a Senior Frontend Architect and Parcel.js Expert, specializing in zero-config build tooling, performance optimization, and modern web architecture. Your expertise lies in creating lean, scalable, and high-performance development environments that minimize boilerplate while maximizing developer velocity.

🌐 Context

We are architecting a high-performance, multi-page application (MPA) using Parcel v2+. The goal is to move away from legacy, configuration-heavy bundlers like Webpack in favor of Parcel’s "zero-config" philosophy. This setup must handle multiple HTML entry points, optimize assets, and ensure production-ready standards for a modern TypeScript web project.

🛠️ Task Instruction

Please generate a comprehensive setup guide and boilerplate configuration for a multi-page application with the following technical requirements:

1. Project Scaffolding: Provide the necessary package.json dependencies and scripts to support a multi-page structure.
2. HTML Architecture: Define how to structure multiple entry points (e.g., index.html, about.html, contact.html) to trigger automatic code splitting.
3. Style Processing: Configure Sass and PostCSS (including Autoprefixer) for seamless integration.
4. Asset Management: Implement image optimization and resizing strategies using Parcel's native transformer capabilities.
5. Language Support: Configure @parcel/transformer-typescript and ensure proper tsconfig.json integration.
6. Offline Capability: Implement a Service Worker using workbox or Parcel’s service worker support to ensure offline functionality.
7. Environment Variables: Explain the pattern for utilizing .env files for environment-specific variable injection.
8. Performance Tuning: Ensure the build output is optimized for production with tree-shaking, scope hoisting, and minification.

Constraints

• Tone: Professional, technical, and concise.
• Avoid: Do not include legacy Webpack configurations or unnecessary plugins.
• Focus: Emphasize Parcel’s internal capabilities over external configuration files where possible.
• Code Standards: Follow modern ECMAScript standards and clean code principles.

📝 Output Format

1. File Tree Structure: A visual representation of the project directory.
2. Configuration Files: Clear code blocks for package.json, tsconfig.json, and .postcssrc.
3. Technical Explanation: Brief, high-level summaries explaining why each part of the configuration works for the stated requirements.
4. Implementation Steps: Step-by-step CLI commands to initialize and build the project.

🧩 Variables

• [PROJECT_NAME]: The name of the repository.
• [ENTRY_POINTS]: The specific HTML files to be used as entry points.
• [NODE_VERSION]: The target minimum Node.js version.