Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matrus2/webpack-s3-uploader
Upload all your assets to AWS S3 during webpack build.
https://github.com/matrus2/webpack-s3-uploader
Last synced: about 2 months ago
JSON representation
Upload all your assets to AWS S3 during webpack build.
- Host: GitHub
- URL: https://github.com/matrus2/webpack-s3-uploader
- Owner: matrus2
- License: mit
- Created: 2017-05-05T13:12:37.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-21T08:27:00.000Z (about 2 years ago)
- Last Synced: 2024-10-10T18:27:34.164Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 243 KB
- Stars: 23
- Watchers: 3
- Forks: 9
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
S3 Uploader for Webpack
===
[](https://travis-ci.org/matrus2/webpack-s3-uploader)
This will upload all compiled assets to AWS S3 bucket during a webpack build process. You can serve all your files via Cloud Front or different CDN.
### Installation
```
$ npm i -S webpack-s3-uploader
```
### How to use it
First set environmental variables:
AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
##### Essential webpack configuration
```javascript
// require plugin
var S3Uploader = require('webpack-s3-uploader')
const config = {
context: path.resolve(__dirname, '..'),
output: {
path: path.resolve(__dirname, '../build/public/assets'),
publicPath: 'your_cdn_url',
},
plugins: [
new S3Uploader({
s3Options: {
accessKeyId: process.env.AWS_ACCESS_KEY_ID,
secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
region: 'us-west-1',
sessionToken: 'asdsaad' // the optional AWS session token to sign requests with
},
s3UploadOptions: {
Bucket: 'MyBucket'
},
})
]
// ..other configuration
}
```
It is required to set:
- `output.path` is a path, where all assets will be compiled and those will be uploaded. You can use `exclude` and `include` option.
- `output.publicPath` it is a path, where all compiled assets will be referenced to. During a compilation process webpack replaces local path with this one. If you have Cloud Front pointed to your S3 bucket, you should put url here.
### Options
- `exclude`: A Pattern to match for excluded content (e.g. `/.*\.(css|js)/`). Behaves similarly to webpack's loader configuration.
- `include`: A Pattern to match for included content. Behaves the same as the `exclude`.
- `s3Options`: Provide keys for upload extention of [s3Config](http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Config.html#constructor-property)
- `s3UploadOptions`: Provide upload options [putObject](http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#putObject-property )
- `basePath`: Provide the namespace where upload files on S3
- `progress`: Enable progress bar (defaults true)
##### Advanced `include` and `exclude rules`
`include` and `exclude` rules behave similarly to Webpack's loader options. In addition to a RegExp you can pass a function which will be called with the path as its first argument. Returning a truthy value will match the rule. You can also pass an Array of rules, all of which must pass for the file to be included or excluded.
##### Pathing for resources outside of output.path
Resources that are located outside of the webpack output.path directory are pathed as follows
```javascript
output.path = /myproject/build/dist/bundle
```
```javascript
const ASSET_OUTPUT_PATH =/myproject/build/assets
or
const ASSET_OUTPUT_PATH =../assets
...
rules [
use: [
...,
{
loader: 'file-loader',
options: {
...,
outputPath: ASSET_OUTPUT_PATH
}
}
]
```
The above configuration will output to the local file system as follows
```javascript
build
|
----- dest
|
---- bundle.js
|
----- assets
|
---- myasset.png
and will be pathed in S3 as follows
my-bucket
|
---- bundle.js
---- assets
|
---- myasset.png
```
##### Acknowledgements
This is a lite and refactored version of [s3-plugin-webpack](https://github.com/MikaAK/s3-plugin-webpack)