Insecure Chunk Filenames

[ghost]

Setting the name variable for file chunking in this way:

resolveComponent: name => import(`@/Pages/${name}`).then(module => module.default),

does not achieve the expected result. It never has really. In Webpack < 5 it created numerical chunks, and in Webpack 5 it produces base path chunks like so:

js/resources_js_Pages_Contacts_Index_vue.js?id=c6409fe5b00f9e611442

For me personally, and in general this seems to be insecure since I don't want end users knowing the path of my Vue or other source files.

Luckily in Webpack 5 chunkFilename can be called as a function and we can access the pathData attribute, make changes to it, and set whatever actual name we want.

The pull request to resolve this sets a nice default removing the resources/js/Pages path, lowercases the component name, and replaces underscores with hyphens.

changing the above chunk to:

js/contacts-index-vue.js?id=c6409fe5b00f9e611442

Much cleaner, and exposes nothing related to the path of the source code.

[ghost]

Sadly this only works on dev so far, closed the PR and will continue searching for a solution for production.

[ghost]

So good news for this.

resolveComponent: name => 
    import(/* webpackChunkName: "[request]" */`./Pages/${name}`)
        .then(m => m.default)

Then in Webpack 5 that's used in Mix 6 you can now pass chunkFilename as a function and transform the name if you wish.

In my case I want all the files in lowercase.

output: {
    chunkFilename: (pathData) => {
        let name = pathData.chunk.name.toLowerCase()
        pathData.chunk.name = name

        return 'js/[name].js?id=[chunkhash]'
    }
}

But you could really do any type of transformation on the name that you want.

This solution works on both development and production.

[reinink]

Hey thanks for sharing this! I've actually disabled code splitting on this project, since it's really not necessary.

Glad you got this figured out for yourself though! 👍