Source & Credits

All credits to Oliver Green
Original work olsgreen/webpack-s3-pusher

Changes

This fork allows passing the endpoint as option to facilitate connecting to AWS compatible providers like DigitalOcean.
In addition, you can now pass the desired ACL to be applied to the uploaded files. By default, some providers set the file visibility to private which contradicts with the need of pushing content to CDN for high availability. Now the user can set the option acl to public-read to force public visibility.

webpack-s3-pusher

A webpack plugin that pushes your packed assets to S3 compatible bucket, no more, no less.

For webpack < 4 support use version 1.x

Installation

npm install webpack-s3-pusher-adapted --save-dev

Configuration

new S3PusherPlugin({
    // Target bucket
    bucket: 'BUCKET',

    // Set the credentials.
    key: 'KEY',
    secret: 'SECRET',

    // If you are using Amazon S3 then only set region.
    // However if you are using some other provider then set only endpoint.
    // Region and endpoint both should not be set together.
    region: 'us-west-2',
    // endpoint: 'https://sgp1.digitaloceanspaces.com,

    // Publish to a folder instead of root directory
    prefix: 'assets',

    // Include css & js files
    include: '/.*\.(css|js)/',

    // Exclude minified JS files
    exclude: '/.*.min.js/',

    // Remove files from the bucket before upload.
    remove: [
        'path/to/file1.js',
        'path/to/file2.js',
    ],

    // If you are not using a bucket with default public permissions
    acl: 'public-read',

    // Set Cache-Control header
    cache: 'max-age=602430'
})

You can also use a credentials file from AWS rather than passing them

Push assets to S3 from Laravel Mix

.env

S3_KEY=your_key
S3_SECRET=your_secret
S3_BUCKET=your_bucket

	
	APP_ASSETS_AWS_KEY=your_key
	APP_ASSETS_AWS_SECRET=your_secret
	APP_ASSETS_AWS_REGION=your_region
	APP_ASSETS_AWS_BUCKET=your_bucket
	APP_ASSETS_AWS_ENDPOINT=your_endpoint
	APP_ASSETS_AWS_ACL=your_acl
	APP_CDN_URL=http://my-bucket.s3-website.eu-west-2.amazonaws.com
	
webpack.mix.js:

# If you are using Amazon S3 then only set region.
# However if you are using some other provider then only set endpoint.
# Region and endpoint both should not be set together.

S3_REGION=your_region
# S3_ENDPOINT=your_endpoint

webpack.mix.js

const mix = require('laravel-mix');
const S3PusherPlugin = require('webpack-s3-pusher');

if (mix.inProduction()) {
    mix.webpackConfig({
        plugins: [
            new S3PusherPlugin({
                key: process.env.S3_KEY,
                secret: process.env.S3_SECRET,
                bucket: process.env.S3_BUCKET,
                region: process.env.S3_REGION,
                // endpoint: process.env.S3_ENDPOINT,
                prefix: 'assets',
                acl: 'public-read',
                cache: 'max-age=602430'
            })
        ]
    });
}

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css');

Push assets to bucket

npm run production

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT