# Webpack S3 Plugin

## What is Webpack S3 Plugin?

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.

{% hint style="success" %}

### Prerequisites:

* [x] [Download and install](https://nodejs.org/en/download/) NodeJS version > 0.12.0.
* [x] [Download and install Webpack and create a Webpack project.](https://webpack.js.org/guides/getting-started/)
* [x] [Sign up](https://filebase.com/signup) for a free Filebase account. 
* [x] Have your Filebase Access and Secret Keys. Learn how to view your access keys [here](https://docs.filebase.com/getting-started-guides/getting-started-guide#working-with-access-keys).
* [x] Create a Filebase Bucket. Learn how to create a bucket [here](https://docs.filebase.com/getting-started-guides/getting-started-guide#creating-and-working-with-buckets).
  {% endhint %}

{% hint style="warning" %}
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.
{% endhint %}

### 1. Download the Webpack S3 Plugin:

`npm i webpack-s3-plugin`

### 2. Based on your Webpack configuration, input the following code in the desired configuration or index file.

This example excludes all .html files from upload:

```jsx
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

### 3. This example includes all .css and .js files in the upload:

```jsx
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

### 4. Run your Webpack project:

`npx webpack`