Webpack s3 plugin not updating images to be loaded from S3

Question

I have a problem with Webpack S3 Plugin. I have a very basic configuration:

new S3Plugin({
    s3Options: {
        accessKeyId: process.env.AWS_ACCESS_KEY_ID,
        secretAccessKey: process.env.AWS_ACCESS_KEY_SECRET,
        region: process.env.AWS_REGION
    },
    s3UploadOptions: {
        Bucket: process.env.AWS_S3_BUCKET
    }
})

When I build my code using webpack, bundled JS file, CSS file, and all the fonts are properly uploaded to S3 buckets. The URLs are shown relative to the directory, therefore it works with S3. However, an SVG file loaded using file-loader converts the URL to a relative one also. Because my site is loaded from another domain, I cannot open the image. Also, the image file is not uploaded to S3 either. The file is loaded like this:

import logo from 'img/logo.svg';

Is there a way to make S3 Plugin to convert files to S3 URLs instead of relative ones? Also, is there a way to make S3 upload a file loaded using import?

score 0 · Answer 1 · answered Jul 15 '17 at 15:36

I was missing publicPath from my webpack configuration. I just added it like this:

output: {
    ...,
    publicPath: 'https://' + bucketName + '.s3.amazonaws.com/'
}

The forward slash in the end is important because webpack just appends imported file names to publicPath.

Webpack s3 plugin not updating images to be loaded from S3

1 Answers1