node -v): 7.4.0npm -v): 5.3.0I 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.
Use a dynamic require and enable .version().
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]',
},
});
Most helpful comment
Set chunk file name that include chunkhash as below in webpack.mix.js file