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,
    }),
    ...
  ]
}
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.