Webpack S3 Plugin
Learn how to configure Webpack S3 Plugin for use with Filebase.
Webpack is an open-source JavaScript module bundling package. It’s primarily for JavaScript, but it can be used with HTML, CSS, and image files for front-end development. A variety of webpack plugins have been developed and released for use, including an S3-compatible plugin.
Read below to learn how to use the Webpack S3 Plugin with Filebase.
This guide shows a sample configuration and how to connect a Webpack configuration to Filebase. Filebase is unable to provide debugging for custom configurations due to their individualized nature.
npm i webpack-s3-plugin
This example excludes all .html files from upload:
var S3Plugin = require('webpack-s3-plugin')
var config = {
plugins: [
new S3Plugin({
directory: '/path/to/directory/to/upload',
// Exclude uploading of html
exclude: /.*\\.html$/,
// s3Options are required
s3Options: {
accessKeyId: 'filebase-access-key',
secretAccessKey: 'filebase-secret-key',
region: 'us-east-1',
endpoint: 's3.filebase.com',
signatureVersion: ‘v4’
},
s3UploadOptions: {
Bucket: 'filebase-bucket-name'
},
})
]
}
Replace the following values to match your configuration:
- Directory: Directory where files to be uploaded are stored.
- Exclude: Determine the file type you want to exclude from upload. All other file types will be included.
- AccessKeyId: Filebase Access Key
- SecretAccessKey: Filebase Secret Key
- Bucket: Filebase Bucket Name
var S3Plugin = require('webpack-s3-plugin')
var config = {
plugins: [
new S3Plugin({
directory: '/path/to/directory/to/upload',
// Only upload css and js
include: /.*\\.(css|js)/,
// s3Options are required
s3Options: {
accessKeyId: 'filebase-access-key',
secretAccessKey: 'filebase-secret-key',
region: 'us-east-1',
endpoint: 's3.filebase.com',
signatureVersion: ‘v4’
},
s3UploadOptions: {
Bucket: 'filebase-bucket-name'
},
})
]
}
Replace the following values to match your configuration:
- Directory: Directory where files to be uploaded are stored.
- Include: Determine the file type you want to include in upload. All other file types will be included.
- AccessKeyId: Filebase Access Key
- SecretAccessKey: Filebase Secret Key
- Bucket: Filebase Bucket Name
npx webpack
If you have any questions, please join our Discord server, or send us an email at [email protected]
Last modified 1yr ago