Skip to content

Upload all your assets to AWS S3 during webpack build.

License

Notifications You must be signed in to change notification settings

albancreton/webpack-s3-uploader

 
 

Repository files navigation

S3 Uploader for Webpack

Build Status NSP Status

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
// 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'
      },
      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
  • s3UploadOptions: Provide upload options putObject
  • 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.

Acknowledgements

This is a lite and refactored version of s3-plugin-webpack

About

Upload all your assets to AWS S3 during webpack build.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%