Static / Fixed filenames for generated vue-cli builds

#beginners #vue #javascript #buildtools

As you may know, the release of vue-cli 3 is getting close (currently at RC3 status).

I really like the streamlined way of starting projects and having a good baseline for development (especially when trying to setup a good starting point in house, that has documentation and it's actively developed).

However the default setup isn't friendly with legacy projects because vue-cli implicitly adds a hash to the generated filenames. That's great if you're starting a new project/SPA because it's like a built in cache buster but doesn't help if you're trying to integrate it with your favourite c#/php/python/ruby etc application.

In order to change this let's quickly look over the following config

let assetsDir = "assets";

module.exports = {
  assetsDir: assetsDir,

  configureWebpack: {
    output: {
      filename: assetsDir + "/[name].js",
      chunkFilename: assetsDir + "/[name].js"
    }
  },

  chainWebpack: config => {
    if (config.plugins.has("extract-css")) {
      const extractCSSPlugin = config.plugin("extract-css");
      extractCSSPlugin &&
        extractCSSPlugin.tap(() => [
          {
            filename: assetsDir + "/[name].css",
            chunkFilename: assetsDir + "/[name].css"
          }
        ]);
    }

    config.plugins
      .delete("html")
      .delete("prefetch")
      .delete("preload");
  }
};

Since assetsDir isn't applied to custom filenames, we do a small workaround defining a variable, and using that for our generated filenames.

We're then setting the javascript and the css filenames using their respective options and deleting the html plugin that generates the index.html file with it's 'dependencies' prefetch and preload.

Now you are free to use npm run build --modern and setup Modern Mode

An update:

The official docs reference this setup now in a cleaner way

Top comments (2)

Drozerah • Jul 18 '19 • Edited

Hi Alexandru !

I'm struggling to figure out how to remove the generated hash on the images files names, not able to find the right syntax into my vue.config.js, any ideas ?

module.exports = {
  chainWebpack: config => {
    config.module
    .rule('images')
    .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
    .use('url-loader')
    .loader('url-loader')
    .options({
      name: 'img/[name].[ext]'
    });
  }
}

20 minutes later update

Ok, I got it !

module.exports = {
  chainWebpack: config => {
    config.module
    .rule('images')
    .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
    .use('url-loader')
    .loader('file-loader') // not url-loader but file-loader !
    .tap(options => { // not .option() but .tap(options...)
      // modify the options...
      options.name = 'img/[name].[ext]'
      return options
    })
  }
}