webpack-rails-demo icon indicating copy to clipboard operation
webpack-rails-demo copied to clipboard

Cache-busting example with CDN

Open alexkrolick opened this issue 9 years ago • 0 comments

This might be useful for anyone using this with a CDN

const CDN = process.env['CDN_HOST'] || '';

/**
 * Webpack configuration for integrating Webpack with Rails via the webpack-rails gem 
 * (https://github.com/mipearson/webpack-rails)
 * 
 * Cache-Busting Strategy:
 *   Development: Change query string of resource when content MD5 hash changes, 
 *                rewriting the asset in place but triggering rewrite of the manifest.
 *   Production:  Use MD5 hash of asset as filename, writing new assets and manifest 
 *                on each build. Files with unchanged content would be overwritten but cache 
 *                would stay valid. Only due this when old files can be cleaned out regularly, 
 *                ie, as part of Heroku deployment or AWS build pipeline.
 */

const config = {
...
  output: {
        path: production 
            ? path.resolve(appRoot, 'public', 'webpack') 
            : path.resolve(appRoot, 'public', 'webpack'),
        publicPath: production 
            ? CDN + '/webpack/' 
            : '/webpack/',
        filename: production 
            ? '[name]_application--[chunkhash].js' 
            : '[name]_application.js?[chunkhash]',
        devtoolModuleFilenameTemplate: '[resourcePath]',
        devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]',
    },
...
}

alexkrolick avatar Oct 26 '16 18:10 alexkrolick