CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-serverless-webpack

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

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/serverless-webpack@5.15.x
Publish Source
CLI
Badge
tessl/npm-serverless-webpack badge