or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

build-compilation.mdconfiguration.mddevelopment-integration.mdindex.mdmodule-packaging.mdpackagers.mdutilities.mdwebpack-integration.md
tile.json

tessl/npm-serverless-webpack

Serverless Framework plugin that bundles Lambda functions with Webpack for optimized JavaScript deployment packages

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/serverless-webpack@5.15.x

To install, run

npx @tessl/cli install tessl/npm-serverless-webpack@5.15.0

index.mddocs/

Serverless Webpack

Serverless Webpack is a Serverless Framework plugin that bundles Lambda functions with Webpack, enabling modern JavaScript development workflows. It supports configuration ranging from zero-config to fully customizable setups, integrates with Babel for latest JavaScript features, provides custom resource loader support, and optimizes packaged functions individually for smaller deployment packages.

Package Information

  • Package Name: serverless-webpack
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install serverless-webpack --save-dev

Core Setup

Add the plugin to your serverless.yml:

plugins:
  - serverless-webpack

For Serverless v4, disable the default ESBuild support:

build:
  esbuild: false

Basic Usage

# serverless.yml
plugins:
  - serverless-webpack

custom:
  webpack:
    webpackConfig: 'webpack.config.js'
    includeModules: true
    packager: 'npm'

functions:
  hello:
    handler: handler.hello
// webpack.config.js
const slsw = require('serverless-webpack');

module.exports = {
  entry: slsw.lib.entries,
  target: 'node',
  mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

Architecture

Serverless Webpack is built around several key components:

  • Plugin System: Serverless Framework plugin implementing build lifecycle hooks
  • Webpack Integration: Provides lib export for accessing Serverless context in webpack configs
  • Configuration Management: Flexible configuration system supporting zero-config to full customization
  • Module Packaging: External module detection and packaging system supporting npm and yarn
  • Development Integration: Local development support with watch mode and serverless-offline integration

Capabilities

Plugin Configuration

Configuration system for customizing webpack behavior, module packaging, and build options through serverless.yml.

// Plugin configuration schema in serverless.yml
custom:
  webpack:
    webpackConfig: string;              // Path to webpack config file
    includeModules: boolean | object;   // External module inclusion settings  
    packager: 'npm' | 'yarn';          // Package manager selection
    packagerOptions: object;           // Package manager specific options
    excludeFiles: string;              // Glob pattern for file exclusion
    excludeRegex: string;              // Regex pattern for file exclusion
    keepOutputDirectory: boolean;      // Preserve webpack output directory
    concurrency: number;               // Compilation concurrency level

Plugin Configuration

Webpack Integration

Provides lib export for webpack configurations to access Serverless context, auto-generated entries, and build state.

const slsw = require('serverless-webpack');

// Available properties
slsw.lib.entries: { [functionName: string]: string };    // Auto-generated webpack entries
slsw.lib.webpack.isLocal: boolean;                       // Local development flag
slsw.lib.serverless: ServerlessInstance;               // Full Serverless framework access
slsw.lib.options: { [key: string]: any };              // Command-line options

Webpack Integration

Build and Compilation

Core webpack compilation functionality with support for multiple webpack versions, watch mode, and optimization.

// Serverless commands enhanced by plugin
sls webpack                    // Run full webpack build
sls webpack validate          // Validate configuration 
sls webpack compile           // Compile functions
sls webpack compile watch     // Compile with watch mode
sls webpack package          // Package external modules

// Command options
--out <path>                 // Output directory path
--skip-build                // Skip webpack compilation
--watch                     // Enable watch mode
--webpack-use-polling <ms>  // Polling interval for changes
--webpack-no-watch         // Disable automatic watch mode

Build and Compilation

Module Packaging

External module detection, dependency resolution, and packaging system supporting npm and yarn with workspace support.

// Module inclusion configuration
includeModules: boolean | {
  packagePath?: string;           // Path to package.json
  nodeModulesRelativeDir?: string; // Relative path to node_modules
  packageLockPath?: string;       // Path to package-lock.json
  forceExclude?: string[];       // Modules to force exclude
  forceInclude?: string[];       // Modules to force include
}

// Packager options
packagerOptions: {
  [key: string]: any;  // Packager-specific options
}

Module Packaging

Development Integration

Local development support with serverless invoke local, serverless-offline integration, and watch capabilities.

// Enhanced local commands
sls invoke local                          // Local function invocation with webpack
sls invoke local --watch                 // Local invocation with watch mode
sls invoke local --skip-build           // Skip webpack compilation
sls invoke local --webpack-use-polling  // Set polling interval

sls offline start                        // serverless-offline with webpack
sls offline start --webpack-no-watch    // Disable webpack watch
sls offline start --skip-build          // Skip initial build

sls run                                  // Run function locally
sls run --watch                         // Run with watch mode

Development Integration

Utilities

Core utility functions for webpack integration, process management, and serverless framework operations.

// Runtime detection utilities
function isNodeRuntime(runtime: string): boolean;
function getAllNodeFunctions(): string[];
function isProviderGoogle(serverless: ServerlessInstance): boolean;

// Process management utilities  
function spawnProcess(command: string, args: string[], options?: any): Promise<{stdout: string, stderr: string}>;
function guid(): string;

// Module cache management
function purgeCache(moduleName: string): Promise<void>;
function searchAndProcessCache(moduleName: string, processor: Function): Promise<void>;

// Data parsing utilities
function safeJsonParse(str: string): any | null;
function splitLines(str: string): string[];

Utilities

Packager System

Package manager abstraction supporting npm and yarn with workspace and monorepo capabilities.

// Packager factory and interface
function get(packagerId: 'npm' | 'yarn'): Packager;

interface Packager {
  static lockfileName: string;
  static mustCopyModules: boolean;
  static getPackagerVersion(cwd: string): Promise<Object>;
  static getProdDependencies(cwd: string, depth?: number): Promise<Object>;
  static install(cwd: string, packagerOptions?: Object): Promise<void>;
  static prune(cwd: string, packagerOptions?: Object): Promise<void>;
  static runScripts(cwd: string, scriptNames: string[]): Promise<void>;
}

Packager System

Types

// Main plugin class with complete API surface
class ServerlessWebpack {
  static lib: {
    entries: { [functionName: string]: string };
    webpack: { isLocal: boolean };
    serverless: ServerlessInstance;
    options: { [key: string]: string | boolean | number } & { param?: string[] };
  };
  
  constructor(serverless: ServerlessInstance, options: any, v3Utils?: { log: Function, progress: any });
  
  // Configuration and state properties
  webpackConfig: any;
  configuration: Configuration;
  webpackOutputPath: string;
  skipCompile: boolean;
  isWatching: boolean;
  keepOutputDirectory: boolean;
  entryFunctions: string[];
  
  // Lifecycle methods
  validate(): Promise<void>;
  compile(): Promise<void>;
  wpwatch(): Promise<void>;
  cleanup(): Promise<void>;
  watch(command?: string | Function): Promise<void>;
  
  // Module and packaging methods
  packExternalModules(): Promise<void>;
  packageModules(): Promise<void>;
  copyExistingArtifacts(): Promise<void>;
  
  // Local development methods
  prepareLocalInvoke(): Promise<void>;
  prepareOfflineInvoke(): Promise<void>;
  prepareStepOfflineInvoke(): Promise<void>;
  prepareRun(): Promise<void>;
  watchRun(): Promise<void>;
  
  // Plugin support
  runPluginSupport(): Promise<void>;
}

// Configuration class with complete API
class Configuration {
  constructor(custom: any);
  webpackConfig: string;
  includeModules: boolean | object;
  excludeFiles: string;
  excludeRegex: string;
  packager: string;
  packagerOptions: object;
  config: object;
  hasLegacyConfig: boolean;
  keepOutputDirectory: boolean;
  concurrency: number;
  toJSON(): object;
}

// Complete utility functions
function isNodeRuntime(runtime: string): boolean;
function getAllNodeFunctions(): string[];
function isProviderGoogle(serverless: ServerlessInstance): boolean;
function spawnProcess(command: string, args: string[], options?: any): Promise<{stdout: string, stderr: string}>;
function guid(): string;
function purgeCache(moduleName: string): Promise<void>;
function searchAndProcessCache(moduleName: string, processor: Function): Promise<void>;
function safeJsonParse(str: string): any | null;
function splitLines(str: string): string[];

// Error types with complete interface
class SpawnError extends Error {
  stdout: string;
  stderr: string;
  constructor(message: string, stdout: string, stderr: string);
  toString(): string;
}