serverless-webpack
Advanced tools
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.
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'
}
};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.
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.
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.
A Serverless v1.x plugin to build your lambda functions with Webpack.
This plugin is for you if you want to use the latest Javascript version with Babel; use custom resource loaders, optimize your packaged functions individually and much more!
serverless package, serverless deploy and serverless deploy functionserverless invoke local and serverless invoke local --watchserverless-offline to simulate local API Gateway endpointsserverless invoke local (including watch mode)For the complete release notes see the end of this document.
$ npm install serverless-webpack --save-dev
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.
Alternatively, you can specify a different file or configuration in serverless.yml:
custom:
webpack: ./folder/my-webpack.config.js
An base Webpack configuration might look like this:
// webpack.config.js
module.exports = {
entry: './handler.js',
target: 'node',
module: {
loaders: [ ... ]
}
};
serverless-webpack exposes a lib object, that can be used in your webpack.config.js to make the configuration easier and to build fully dynamic configurations. This is the preferred way to configure webpack - the plugin will take care of as much of the configuration (and subsequent changes in your services) as it can.
You can let the plugin determine the correct handler entry points at build time. Then you do not have to care anymore when you add or remove functions from your service:
// webpack.config.js
const slsw = require('serverless-webpack');
module.exports = {
...
entry: slsw.lib.entries,
...
};
Custom entries that are not part of the SLS build process can be added too:
// webpack.config.js
const _ = require('lodash');
const slsw = require('serverless-webpack');
module.exports = {
...
entry: _.assign({
myCustomEntry1: './custom/path/something.js'
}, slsw.lib.entries),
...
};
The lib export also provides the serverless and options properties, through
which you can access the Serverless instance and the options given on the command-line.
This enables you to have a fully customized dynamic configuration, that can evaluate anything available in the Serverless framework. There are really no limits.
Samples are: The current stage and the complete service definition. You thereby have access to anything that a Serverless plugin would have access to.
Both properties should be handled with care and should never be written to, as that will modify the running framework and leads to unpredictable behavior!
If you have cool use cases with the full customization, we might add your solution to the plugin examples as showcase.
Note that, if the output configuration is not set, it will automatically be
generated to write bundles in the .webpack directory. If you set your own output
configuration make sure to add a libraryTarget
for best compatibility with external dependencies:
// webpack.config.js
module.exports = {
// ...
output: {
libraryTarget: 'commonjs',
path: '.webpack',
filename: 'handler.js', // this should match the first part of function handler in `serverless.yml`
},
// ...
};
By default, the plugin will try to bundle all dependencies. However, you don't
want to include all modules in some cases such as selectively import, excluding
builtin package (ie: aws-sdk) and handling webpack-incompatible modules.
In this case you might add external modules in
Webpack's externals configuration.
Those modules can be included in the Serverless bundle with the webpackIncludeModules
option in serverless.yml:
// webpack.config.js
var nodeExternals = require('webpack-node-externals')
module.exports = {
// we use webpack-node-externals to excludes all node deps.
// You can manually set the externals too.
externals: [nodeExternals()],
}
# serverless.yml
custom:
webpackIncludeModules: true # enable auto-packing of external modules
All modules stated in externals will be excluded from bundled files. If an excluded module
is stated as dependencies in package.json, it will be packed into the Serverless
artifact under the node_modules directory.
By default, the plugin will use the package.json file in working directory, If you want to
use a different package file, set packagePath to your custom package.json:
# serverless.yml
custom:
webpackIncludeModules:
packagePath: '../package.json' # relative path to custom package.json file.
Note that only relative path is supported at the moment.
You can find an example setups in the examples folder.
If you do not enable individual packaging in your service (serverless.yml), the plugin creates one ZIP file for all functions (the service package) that includes all node modules used in the service. This is the fastest packaging, but not the optimal one, as node modules are always packaged, that are not needed by some functions.
A better way to do the packaging, is to enable individual packaging in your service:
# serverless.yml
...
package:
individually: true
...
This will switch the plugin to per function packaging which makes use of the multi-compiler feature of Webpack. That means, that Webpack compiles and optimizes each function individually, removing unnecessary imports and reducing code sizes significantly. Tree-Shaking only makes sense with this approach.
Now the needed external node modules are also detected by Webpack per function and the plugin only packages the needed ones into the function artifacts. As a result, the deployed artifacts are smaller, depending on the functions and cold-start times (to install the functions into the cloud at runtime) are reduced too.
The individual packaging should be combined with the automatic entry resolution (see above).
The individual packaging needs more time at the packaging phase, but you'll get that paid back twice at runtime.
The normal Serverless deploy procedure will automatically bundle with Webpack:
serverless create -t aws-nodejsserverless deployThe plugin fully integrates with serverless invoke local. To run your bundled functions
locally you can:
$ serverless invoke local --function <function-name>
All options that are supported by invoke local can be used as usual:
--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--data or -d (optional) inline JSON data used as the function input event:exclamation: The old
webpack invokecommand has been disabled.
Or to run a function every time the source files change use the --watch option
together with serverless invoke local:
$ serverless invoke local --function <function-name> --path event.json --watch
Everytime the sources are changed, the function will be executed again with the changed sources. The command will watch until the process is terminated.
All options that are supported by invoke local can be used as usual:
--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--data or -d (optional) inline JSON data used as the function input event:exclamation: The old
webpack watchcommand has been disabled.
The plugin integrates very well with serverless-offline to simulate AWS Lambda and AWS API Gateway locally.
Add the plugins to your serverless.yml file and make sure that serverless-webpack
precedes serverless-offline as the order is important:
plugins:
...
- serverless-webpack
...
- serverless-offline
...
Run serverless offline or serverless offline start to start the Lambda/API simulation.
In comparison to serverless offline, the start command will fire an init and a end lifecycle hook which is needed for serverless-offline and e.g. serverless-dynamodb-local to switch off resources (see below).
You can find an example setup in the examples folder.
If you do not use the default path and override it in your Webpack configuration,
you have use the --location option.
Configure your service the same as mentioned above, but additionally add the serverless-dynamodb-local
plugin as follows:
plugins:
- serverless-webpack
- serverless-dynamodb-local
- serverless-offline
Run serverless offline start.
You can reduce the clutter generated by serverless-offline with --dontPrintOutput and
disable timeouts with --noTimeout.
To just bundle and see the output result use:
$ serverless webpack --out dist
Options are:
--out or -o (optional) The output directory. Defaults to .webpack.:exclamation: The serve command has been removed. See above how to achieve the
same functionality with the serverless-offline plugin.
In the examples folder there is a Serverless project using this
plugin with Babel. To try it, from inside the example folder:
npm install to install dependenciesserverless invoke local -f hello to run the example functionPlugin commands are supported by the following providers. ⁇ indicates that command has not been tested with that provider.
| AWS Lambda | Apache OpenWhisk | Azure Functions | Google Cloud Functions | |
|---|---|---|---|---|
| webpack | ✔︎ | ✔︎ | ⁇ | ⁇ |
| invoke local | ✔︎ | ⁇ | ⁇ | ⁇ |
| invoke local --watch | ✔︎ | ⁇ | ⁇ | ⁇ |
3.0.0
serverless invoke local #151serverless invoke local --watchwebpack serve command in favor of serverless-offline #1522.2.2
2.2.1
2.2.0
2.1.0
2.0.0
FAQs
Serverless plugin to bundle your javascript with Webpack
The npm package serverless-webpack receives a total of 124,956 weekly downloads. As such, serverless-webpack popularity was classified as popular.
We found that serverless-webpack demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.
Security News
FSF files an amicus brief against Neo4j, defending the AGPL and warning against adding restrictive terms that undermine free software rights.
Research
Security News
Malicious PyPI package ‘set-utils’ steals Ethereum private keys by exfiltrating them through blockchain transactions via the Polygon RPC.