Vuejs Webpack Template Reduce Output File Hash Length

Dec 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 via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.