A pochade (from French poche, pocket) is a type of sketch used in painting. As opposed to a croquis, which is line art, a pochade captures the colors and atmosphere of a scene. - Wikipedia

Most Javascript templates are ornate and already massively complex. My Javascript style is very component based and I wanted to both develop and utilize components quickly.

I also wanted to be able to utilize useful features that only a build system can do, so you can bundle your CSS and your WebWorkers

npx pochade-js name-of-new-project-here

Module Processing

  • CSS Processing Pipeline
    • style-loader - Injects CSS into the DOM
    • css-loader - Resolves CSS imports and URLs
    • postcss-loader with cssnano - Minifies and optimizes CSS
    • Source maps enabled in development mode
    • Automatic comment removal in production builds
  • JavaScript Processing
    • builtin:swc-loader - Fast JavaScript transpilation
    • Custom transform-workers.js loader - Transforms web worker imports
    • Dynamic imports forced to eager mode for web worker compatibility
    • Source maps enabled in development mode

Web Workers

The build system includes special handling for web workers:

  • Custom loader (scripts/transform-workers.js) transforms worker imports
  • Dynamic imports are eagerly evaluated for worker compatibility
  • Workers are properly bundled and can be imported in your code

Assets Directory

The assets/ folder receives special treatment:

  • Development Server: Assets are served from the root path (/) if the directory exists and contains files
  • Production Build: Assets are copied to the dist root (not in a subdirectory) via CopyRspackPlugin
  • Conditional Loading: Assets are only processed if the directory exists and has files

Place any static files (images, fonts, etc.) in the assets/ directory and they will be accessible from the root path in both dev and production.

Optimization

  • splitChunks: false - Bundles everything into a single file
  • runtimeChunk: false - No separate runtime chunk
  • clean: true - Automatically cleans the dist directory before each build

Development Server

  • Serves static files from project root
  • Conditionally serves assets directory
  • Gzip compression enabled
  • Cache-Control headers set to no-store for development
  • Configurable port via environment variable

Environment Configuration

  • .env file support via dotenv
  • OUTPUT_FILE_NAME - Customize output filename (default: main.min.js)
  • PORT - Configure dev server port (default: 3000)
  • NODE_ENV - Set to production for production builds

Technologies

  • Rspack - Fast bundler for development and production
  • dataroom-js - Custom HTML elements framework
  • Web Workers - For parallel processing
  • PostCSS - CSS processing with cssnano optimization
  • SWC - Fast JavaScript/TypeScript compiler

Publishing to npm

This project is configured for publishing to npm. Follow these steps to publish:

Before First Publish

  1. Update package metadata in package.json:
    • Set the package name (must be unique on npm)
    • Update author with your name and email
    • Update repository, bugs, and homepage URLs with your actual repository
    • Set the initial version (recommend starting with 0.1.0)
  2. Verify the package contents: 
    npm pack --dry-run

    This shows what files will be included in the package.

  3. Test the build: 
    npm run build

    Ensure the dist/ directory is created successfully.

Publishing

  1. Login to npm (first time only): 
    npm login
  2. Publish the package: 
    npm publish