1. Tutorials
  2. Vue.js

Vuejs Webpack Template Reduce Output File Hash Length

December 20, 2017

If you are using vuejs-templates/webpack, the production build (npm run build) of the JavaScript and CSS files come with a long hash length, such as app.19ae7b77127560ab8328.js.

To reduce the hash length to 6 characters, edit build/webpack.prod.conf.js in your project directory.

Observe changes marked with // EDIT: comment.

...
const webpackConfig = merge(baseWebpackConfig, {
  ...
  output: {
    // EDIT: reduce js hash length to 6 characters
    hashDigestLength: 6,
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  }
  ...
  plugins: [
    ...
    // extract css into its own file
    new ExtractTextPlugin({
      // EDIT: reduce css hash length to 6 characters
      filename: utils.assetsPath('css/[name].[contenthash:6].css'),
      // filename: utils.assetsPath('css/[name].[contenthash].css'),
      // set the following option to `true` if you want to extract CSS from
      // codesplit chunks into this main css file as well.
      // This will result in *all* of your app's CSS being loaded upfront.
      allChunks: false,
    }),
    ...
  ]
}
❤️ Is this article helpful?
Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.
👶 Apps I built
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
COVID-19 - data, chart, information & news.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now
By Desmond Lua
A dream boy who enjoys programming and travelling, maker of Travelopy. Follow me on @d_luaz.
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.