serverless-webpack

What is serverless-webpack?

The serverless-webpack npm package is a Serverless Framework plugin that integrates Webpack to optimize and bundle your Serverless functions. It allows you to use Webpack's powerful features like tree shaking, code splitting, and module resolution to create optimized and efficient Serverless applications.

What are serverless-webpack's main functionalities?

Bundling

This feature allows you to bundle your Serverless functions using Webpack. The provided code sample demonstrates a basic Webpack configuration for bundling a handler.js file.

module.exports = {
  entry: './handler.js',
  target: 'node',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  output: {
    libraryTarget: 'commonjs2',
    path: path.resolve(__dirname, '.webpack'),
    filename: 'handler.js'
  }
};

Tree Shaking

Tree shaking is a feature that eliminates dead code from your bundle. The code sample shows how to enable tree shaking by setting the mode to 'production' and using the 'usedExports' optimization option.

module.exports = {
  mode: 'production',
  entry: './handler.js',
  optimization: {
    usedExports: true
  },
  output: {
    libraryTarget: 'commonjs2',
    path: path.resolve(__dirname, '.webpack'),
    filename: 'handler.js'
  }
};

Code Splitting

Code splitting allows you to split your code into separate bundles, which can be loaded on demand. The code sample demonstrates how to configure Webpack to create separate bundles for 'handler.js' and 'anotherModule.js'.

module.exports = {
  entry: {
    handler: './handler.js',
    anotherModule: './anotherModule.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, '.webpack')
  }
};

Module Resolution

Module resolution allows you to create aliases for directories, making it easier to import modules. The code sample shows how to create an alias '@utils' for the 'src/utils/' directory.

module.exports = {
  resolve: {
    alias: {
      '@utils': path.resolve(__dirname, 'src/utils/')
    }
  },
  entry: './handler.js',
  output: {
    libraryTarget: 'commonjs2',
    path: path.resolve(__dirname, '.webpack'),
    filename: 'handler.js'
  }
};

Other packages similar to serverless-webpack

serverless-bundle

The serverless-bundle package is a Serverless Framework plugin that uses Webpack and Babel to bundle your functions. It simplifies the setup process by providing a pre-configured Webpack and Babel setup. Compared to serverless-webpack, serverless-bundle is more opinionated and easier to set up, but offers less flexibility for custom configurations.

serverless-plugin-typescript

The serverless-plugin-typescript package is a Serverless Framework plugin that compiles your TypeScript code to JavaScript before deployment. It uses the TypeScript compiler (tsc) instead of Webpack. Compared to serverless-webpack, it is more focused on TypeScript projects and does not offer the same level of optimization and bundling features.

serverless-esbuild

The serverless-esbuild package is a Serverless Framework plugin that uses esbuild to bundle and minify your functions. Esbuild is known for its speed and efficiency. Compared to serverless-webpack, serverless-esbuild offers faster build times but may lack some of the advanced features and plugins available in Webpack.

README

Serverless Webpack

A Serverless v1.0 plugin to build your lambda functions with Webpack.

Install

npm install serverless-webpack

Add the plugin to your serverless.yml file:

plugins:
  - serverless-webpack

By default the plugin will look for a webpack.config.js in the service directory. In alternative you can specify a different file or configuration in the serverless.yml with:

custom:
  webpack: ./folder/my-webpack.config.js

Note that, if the output configuration is not set, it will automatically be generated to write bundles in the .webpack directory.

Usage

The normal Serverless deploy procedure will automatically bundle with Webpack:

• Create the Serverless project with serverless create -t aws-node
• Install Serverless Webpack as above
• Deploy with serverless deploy

To run your bundled functions locally you can:

serverless webpack run --function <function-name>

Or to run a function every time the source files change use watch:

serverless webpack watch --function <function-name> --path event.json

For both commands the options are:

• --function or -f (required) is the name of the function to run
• --path or -p (optional) is a JSON file path used as the function input event

Lastly use serverless webpack --out dist to compile files in the dist directory.

Example with Babel

In the example folder there is a Serverless project using this plugin with Babel. To try it, from inside the example folder:

• npm install to install dependencies
• serverless webpack run -f hello to run the example function