Laravel-mix: How to add versioning filehash to dynamically required files?

Created on 28 Jul 2017  路  6Comments  路  Source: JeffreyWay/laravel-mix

  • Laravel Mix Version: 1.3.1
  • Node Version (node -v): 7.4.0
  • NPM Version (npm -v): 5.3.0
  • OS: Ubuntu 16.04

Description:

I am dynamically requiring files like so:

import(`resources/assets/images/svg/${this.name}.svg`).then((module) => {
    this.svg = module;
}).catch(error => 'An error occured while loading the svg');

These chunks are outputed to an svg directory through Webpack with the chunkFilename property:

chunkFilename: 'js/svg/[name].js'

They get properly written to my mix-manifest.json file with a query string containing a hash but is there any way to use this hash as well when creating dynamic imports? The dynamic imports functionality from webpack automatically injects your script based on a promise.

This would have to mean I would have to hook into the script that gets injected and add the query hash there somehow.

Any tips on how to get this done?

If this is not possible it would be a pretty big downer since it would mean images cannot be cachebusted when dynamically requiring them. In other words code splitting for assets can not be versioned.

Steps To Reproduce:

Use a dynamic require and enable .version().

stale

Most helpful comment

Set chunk file name that include chunkhash as below in webpack.mix.js file

mix.webpackConfig({
    .....
    output: {
        chunkFilename: '[name].js?id=[chunkhash]',
    },
});

All 6 comments

I fixed it by using:

chunkFilename: 'js/svg/[name]-[chunkhash].js'

This creates a hash based on the files content but it is different from the id being set and it is also useless to now still have all these dynamically required svg's be generated in my mix-manifest.json.

Is there any way to disable these dynamically required from being inserted into my mix-manifest.json file?

@stephan-v I am looking for solution to this too. Have you got a good way to do it or it's the above?

I'm afraid I still don't have a proper solution for this. It works but it is ugly as hell to have all of these file references in my mix-manifest.json.

Have you faced/encountered the issue where you make changes to the dynamic import but it's hash doesn't change (similar to https://github.com/JeffreyWay/laravel-mix/issues/665#issuecomment-297202911)?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Set chunk file name that include chunkhash as below in webpack.mix.js file

mix.webpackConfig({
    .....
    output: {
        chunkFilename: '[name].js?id=[chunkhash]',
    },
});
Was this page helpful?
0 / 5 - 0 ratings

Related issues

mstralka picture mstralka  路  3Comments

rlewkowicz picture rlewkowicz  路  3Comments

dtheb picture dtheb  路  3Comments

hasnatbabur picture hasnatbabur  路  3Comments

Bomavi picture Bomavi  路  3Comments