tessl/npm-serverless-webpack

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

—

Pending

Overview

Eval results

Files

Webpack Integration

Name: tessl/npm-serverless-webpack
Author: tessl

The lib export provides webpack configurations with access to Serverless context, auto-generated entries, and build state information.

Capabilities

Lib Export Access

Import and use the serverless-webpack lib export in your webpack configuration.

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

// Available lib properties (extended at runtime by plugin)
slsw.lib.entries: { [functionName: string]: string };    // Auto-generated webpack entries from functions
slsw.lib.webpack: { isLocal: boolean };                  // Build context and state information  
slsw.lib.serverless: ServerlessInstance;               // Full Serverless framework instance access
slsw.lib.options: { [key: string]: string | boolean | number } & { param?: string[] }; // Command-line options and parameters

Runtime Extension: The lib export starts as a basic object but is extended at runtime by the plugin with serverless, options, and entries properties during the validation phase.

Usage Examples:

// Basic usage with auto-generated entries
const slsw = require('serverless-webpack');

module.exports = {
  entry: slsw.lib.entries,
  target: 'node',
  mode: slsw.lib.webpack.isLocal ? 'development' : 'production'
};

// Access command-line options
const slsw = require('serverless-webpack');

module.exports = {
  entry: slsw.lib.entries,
  target: 'node',
  devtool: slsw.lib.options.stage === 'dev' ? 'source-map' : false
};

Auto-Generated Entries

Automatically resolve webpack entry points from Serverless function definitions.

/**
 * Auto-generated webpack entries object mapping function names to handler file paths
 */
slsw.lib.entries: { [functionName: string]: string };

The entries object is automatically populated based on your serverless.yml function definitions:

Usage Examples:

// Use auto-generated entries
const slsw = require('serverless-webpack');

module.exports = {
  entry: slsw.lib.entries,  // Automatically includes all function handlers
  target: 'node'
};

// Combine with custom entries
const _ = require('lodash');
const slsw = require('serverless-webpack');

module.exports = {
  entry: _.assign({
    customEntry: './src/custom-handler.js',
    utilityEntry: './src/utilities.js'
  }, slsw.lib.entries),
  target: 'node'
};

For a serverless.yml with functions:

functions:
  hello:
    handler: src/handlers/hello.handler
  goodbye:  
    handler: src/handlers/goodbye.handler

The slsw.lib.entries object becomes:

{
  hello: './src/handlers/hello.js',
  goodbye: './src/handlers/goodbye.js'  
}

Build Context State

Access build context and environment information through the webpack state object.

/**
 * Webpack build context and state information
 */
slsw.lib.webpack: {
  isLocal: boolean;  // True when running locally (invoke local, offline, run commands)
}

Usage Examples:

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

module.exports = {
  entry: slsw.lib.entries,
  target: 'node',
  mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
  devtool: slsw.lib.webpack.isLocal ? 'eval-source-map' : false,
  optimization: {
    minimize: !slsw.lib.webpack.isLocal
  }
};

Serverless Framework Access

Access the full Serverless framework instance for advanced webpack configuration.

/**
 * Full Serverless framework instance providing access to service configuration,
 * providers, plugins, and all framework capabilities
 */
slsw.lib.serverless: ServerlessInstance;

Usage Examples:

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

module.exports = async () => {
  // Access AWS provider for dynamic configuration
  const accountId = await slsw.lib.serverless.providers.aws.getAccountId();
  const region = slsw.lib.serverless.providers.aws.getRegion();
  
  return {
    entry: slsw.lib.entries,
    target: 'node',
    plugins: [
      new webpack.DefinePlugin({
        AWS_ACCOUNT_ID: JSON.stringify(accountId),
        AWS_REGION: JSON.stringify(region),
        SERVICE_NAME: JSON.stringify(slsw.lib.serverless.service.service)
      })
    ]
  };
};

// Access service configuration
const slsw = require('serverless-webpack');

module.exports = {
  entry: slsw.lib.entries,
  target: 'node',
  externals: slsw.lib.serverless.service.provider.name === 'aws' 
    ? ['aws-sdk'] 
    : []
};

Command-Line Options

Access command-line options and parameters passed to Serverless commands.

/**
 * Command-line options and parameters object
 */  
slsw.lib.options: {
  [key: string]: string | boolean | number;
  stage?: string;        // Deployment stage
  region?: string;       // AWS region
  function?: string;     // Specific function name
  param?: string[];      // Additional parameters array
}

Usage Examples:

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

module.exports = {
  entry: slsw.lib.entries,
  target: 'node',
  // Different optimization based on stage
  optimization: {
    minimize: slsw.lib.options.stage === 'prod',
    splitChunks: slsw.lib.options.stage === 'prod' ? {
      chunks: 'all'
    } : false
  },
  // Environment-specific externals
  externals: slsw.lib.options.stage === 'local' ? [] : ['aws-sdk']
};

Asynchronous Webpack Configuration

Support for asynchronous webpack configurations using async/await or Promises.

/**
 * Webpack configuration can be:
 * - Synchronous object
 * - Async function returning configuration object  
 * - Promise resolving to configuration object
 */
module.exports: object | (() => Promise<object>) | Promise<object>;

Usage Examples:

// Async function approach
const slsw = require('serverless-webpack');

module.exports = async () => {
  const accountId = await slsw.lib.serverless.providers.aws.getAccountId();
  
  return {
    entry: slsw.lib.entries,
    target: 'node',
    plugins: [
      new webpack.DefinePlugin({
        ACCOUNT_ID: JSON.stringify(accountId)
      })
    ]
  };
};

// Promise approach
const slsw = require('serverless-webpack');
const BbPromise = require('bluebird');

module.exports = BbPromise.try(() => {
  return slsw.lib.serverless.providers.aws.getAccountId()
    .then(accountId => ({
      entry: slsw.lib.entries,
      target: 'node',
      plugins: [
        new webpack.DefinePlugin({
          ACCOUNT_ID: JSON.stringify(accountId)
        })
      ]
    }));
});

Function Entry Overrides

Override auto-generated entries for specific functions using the entrypoint option.

# In serverless.yml - override entry for functions with custom entrypoints
functions:
  my-function:
    handler: layer.handler      # Handler from layer
    entrypoint: src/index.handler   # Actual webpack entry point
    layers:
      - LAYER-ARN

This allows webpack to use src/index.handler as the entry point while the actual Lambda handler remains layer.handler.

TypeScript Support Integration

Automatic TypeScript compilation support when using .ts webpack configurations.

// Automatically detected TypeScript webpack config support
// webpack.config.ts or custom.webpack.webpackConfig ending in .ts
// Requires ts-node as dependency for compilation

Usage Examples:

# serverless.yml with TypeScript webpack config
custom:
  webpack:
    webpackConfig: 'webpack.config.ts'

// webpack.config.ts
import { Configuration } from 'webpack';
const slsw = require('serverless-webpack');

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

export = config;

Integration Patterns

Zero-Config Setup

Use serverless-webpack with minimal configuration for standard projects.

// webpack.config.js - minimal setup
const slsw = require('serverless-webpack');

module.exports = {
  entry: slsw.lib.entries,
  target: 'node'
};

Advanced Dynamic Configuration

Leverage full Serverless context for complex, environment-aware webpack configurations.

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

module.exports = async () => {
  const service = slsw.lib.serverless.service;
  const stage = slsw.lib.options.stage;
  const isProduction = stage === 'production';
  
  return {
    entry: slsw.lib.entries,
    target: 'node',
    mode: isProduction ? 'production' : 'development',
    output: {
      libraryTarget: 'commonjs',
      path: path.resolve(__dirname, '.webpack'),
      filename: '[name].js'
    },
    optimization: {
      minimize: isProduction
    },
    externals: service.provider.name === 'aws' ? ['aws-sdk'] : [],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  };
};

Install with Tessl CLI

npx tessl i tessl/npm-serverless-webpack

docs

build-compilation.md

configuration.md

development-integration.md

webpack-integration.md

tile.json

tessl/npm-serverless-webpack