jonasho/serverless-plugin-webpack

Serverless Plugin Webpack

Serverless Plugin Webpack

A serverless plugin to automatically bundle your functions individually with webpack.

Compared to other webpack/optimization plugins, this plugin has the following features/advantages:

• Zero configuration
• Supports sls package, sls deploy and sls deploy function
• Functions are packaged individually, resulting in Lambda deployment packages (zip) containing only the code needed to run the function (no bloat)
• Uses an array of webpack configurations instead of one webpack configuration with multiple entry points, resulting in better tree-shaking because dependencies are isolated (see Tree shaking).

This plugin is partially based on Serverless Webpack.

Install

Using npm:

npm install serverless-plugin-webpack --save-dev

Add the plugin to your serverless.yml file:

plugins:
  - serverless-plugin-webpack

Package exclude / include

The plugin will add '**' as an exclude at the service level and each bundled javascript file as an include at the function level. Original includes and excludes specified in your serverless.yml are preserved.

Webpack configuration

By default the plugin will look for a webpack.config.js in the service root. You can specify a custom config file in your serverless.yml:

custom:
  webpack:
    config: ./path/to/config/file.js

The entry and output objects are set by the plugin.

Example of webpack config:

module.exports = {
  // entry: set by the plugin
  // output: set by the plugin
  target: 'node',
  externals: [
    /aws-sdk/, // Available on AWS Lambda
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: [
            [
              'env',
              {
                target: { node: '6.10' }, // Node version on AWS Lambda
                useBuiltIns: true,
                modules: false,
                loose: true,
              },
            ],
            'stage-0',
          ],
        },
      },
    ],
  },
};

Typescript and custom source dir

By default the plugin will use .js as file extension for the handler while bundling the entry scripts. To use a different filetype you can specify the extension in the serverless.yml. Also it is possible to specify the basedir used to resolve the handler.

custom:
  webpack:
    handlerFileExtension: .ts
    sourceDir: src

If you want to further optimize the bundle and are using ES6 features, you can use the UglifyJS Webpack Plugin together with the harmony branch of UglifyJS 2 or the Babili Webpack Plugin.