Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Option to disable versioning of main.js file? #1311

Open
smartboyathome opened this issue Sep 11, 2019 · 4 comments
Open

Option to disable versioning of main.js file? #1311

smartboyathome opened this issue Sep 11, 2019 · 4 comments

Comments

@smartboyathome
Copy link

@smartboyathome smartboyathome commented Sep 11, 2019

Is your feature request related to a problem? Please describe.
I am using react-static to create a site that is hosted out of S3. I want to be able to use object versioning to track changes to the objects over time, but I can't do that with the main JS file, as it has a hash code in the middle. I am guessing that this is used for cache busting, but S3 already has robust etag support built in, so its not as necessary for me. This also forces me to have extra logic to search for the old main JS file and remove it at deployment time, adding to the time it takes me to deploy my site

Describe the solution you'd like
I would like to disable the insertion of this hash into my main.js's filename, so that it comes out as "main.js" rather than "main.{hash}.js".

Describe alternatives you've considered
Currently, today, I have logic in my deployment script which manually searches for any file with the prefix "main.", and removes all that do not exist in my build directory. While this works, its not exactly a foolproof solution, and as said above it doesn't allow me to enable object versioning.

I could add a custom node.api.js script that renames this file myself after the build has completed, but this will require me to do a find/replace on the HTML files in order to fix all the references. I'll do it if necessary, but this would be a hack that might cause problems in the future.

I was digging through the code to see if I had missed something. It looks like the filename is generated by webpack-flush-chunks? If so, their docs don't mention anything about adding a hash to the filename, just "main.js" on its own. Perhaps there's an option there that I am missing? If there's a way to set options in the webpack config for this library, then that could be a suitable alternative, as I can easy add it to my node.api.js.

@smartboyathome
Copy link
Author

@smartboyathome smartboyathome commented Sep 11, 2019

So, I found a way to disable the hashes using node.api.js. It's not pretty and it's rather brittle (especially that url-loader piece), so I would still like to see if perhaps an option could be provided with static.config.js. Here's the relevant piece of code within my app:

export default pluginOptions => ({
    webpack: config => {
        // Not all webpack configs include a hash in the filenames / chunk filenames, so you can't just blindly override
        // these props to static values.
        if (config.output.filename.includes("[hash:8]")) {
            config.output.filename = config.output.filename.replace("[hash:8].", "");
        }
        if (config.output.chunkFilename.includes("[chunkHash:8]")) {
            config.output.chunkFilename = config.output.chunkFilename.replace("[chunkHash:8].", "");
        }
        config.module.rules.forEach((rule) => {
            if (Array.isArray(rule.oneOf)) {
                rule.oneOf.forEach((oneOfRule) => {
                    if (oneOfRule.loader === "url-loader" && typeof oneOfRule.query === "object" && typeof oneOfRule.query.name === "string" && oneOfRule.query.name.includes("[hash:8]")) {
                        oneOfRule.query.name = oneOfRule.query.name.replace("[hash:8].", "");
                    }
                })
            }
        });

        return config;
    },
});
@SleeplessByte
Copy link
Member

@SleeplessByte SleeplessByte commented Sep 17, 2019

This would actually be the correct way to do this / via webpack options in the static config.

We can turn this into a platform-feature if you'd like (where it would not set the hash in the webpack options).

@smartboyathome
Copy link
Author

@smartboyathome smartboyathome commented Sep 17, 2019

That would indeed be what I was after. The reason the above is brittle is because it depends on a lot of conditionals, which could grow out of date as react-static evolves. There are other webpack plugins besides url-loader that react-static aren't using today, but could in the future, which may contain a hash of some sort. But, as I said, for now what I have suffices.

@SleeplessByte
Copy link
Member

@SleeplessByte SleeplessByte commented Sep 18, 2019

Thank you for providing it ❤️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.