Unique cache busting settings per asset file

nboliver · June 26, 2018, 12:22am

Looking to create a supplementary css file that does not have any cache busting (so it can be linked to externally), while maintaining cache busting on main.css. Any tips or pointers on how to do this?

knowler · June 26, 2018, 12:35am

Right now this is the current configuration:

github.com

roots/sage/blob/master/resources/assets/build/webpack.config.js#L13


const webpack = require('webpack');
const merge = require('webpack-merge');
const CleanPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const CopyGlobsPlugin = require('copy-globs-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');


const config = require('./config');


const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]';


let webpackConfig = {
context: config.paths.assets,
entry: config.entry,
devtool: (config.enabled.sourceMaps ? '#source-map' : undefined),
output: {
  path: config.paths.dist,
  publicPath: config.publicPath,
  filename: `scripts/${assetsFilenames}.js`,
},

github.com

roots/sage/blob/master/resources/assets/build/webpack.config.js#L151


 * It would be nice to switch to copy-webpack-plugin, but
 * unfortunately it doesn't provide a reliable way of
 * tracking the before/after file names
 */
new CopyGlobsPlugin({
  pattern: config.copy,
  output: `[path]${assetsFilenames}.[ext]`,
  manifest: config.manifest,
}),
new ExtractTextPlugin({
  filename: `styles/${assetsFilenames}.css`,
  allChunks: true,
  disable: (config.enabled.watcher),
}),
new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  Popper: 'popper.js/dist/umd/popper.js',
}),
new webpack.LoaderOptionsPlugin({

Looks like ExtractTextPlugin’s filename takes a string or a function. You probably could chuck a conditional in there to test for a specific filename. You would need to have a second stylesheet that’d be identical to main.scss or perhaps even import main.scss.

knowler · June 26, 2018, 2:07am

If you duplicate the ExtractTextPlugin and change the filename to just be the chunk name, you’ll get a cache busted version and a non-cache busted version of each stylesheet:

    new ExtractTextPlugin({
      filename: `styles/[name].css`,
      allChunks: true,
      disable: (config.enabled.watcher),
    }),
    new ExtractTextPlugin({
      filename: `styles/${assetsFilenames}.css`,
      allChunks: true,
      disable: (config.enabled.watcher),
    }),

It is important that the non-cache busted one is first since dist/assets.json — which is used by Sage for enqueuing assets — will only receive one entry for the asset. The second one seems to write over the first.

For example, dist/assets.json:

{
  "scripts/customizer.js": "scripts/customizer_bd6453a9.js",
  "styles/main.css": "styles/main_bd6453a9.css",
  "scripts/main.js": "scripts/main_bd6453a9.js"
}

Actual folder structure:

dist
├── scripts
│  ├── customizer_bd6453a9.js
│  └── main_bd6453a9.js
├── styles
│  ├── main.css
│  └── main_bd6453a9.css
└── assets.json

nboliver · June 26, 2018, 3:23pm

Perfect, that’s exactly what I was looking for. Thanks!

stuartcusackie · July 8, 2019, 11:34am

Cheers. This works well.

It would be nice if there was a simpler way to add files that shouldn’t be cache-busted or minified.

For example, I’m trying to serve a fonts.css file to an external provider (they can utilise my client’s fonts on their third-party ticketing system). It would be ideal if this file wasn’t cache-busted or minified.

Maybe a new folder where these kinds of assets can be placed?

knowler · July 8, 2019, 6:07pm

If you were using PostCSS instead of Sass, you could just have them reference the source file: resources/assets/styles/common/fonts.css (or whatever your filepath looks like). Or you could swap the file extension for that one file and just have Sass import it.