Is there a way to pass hash value from webpack to vueJS application

Question

I am new to webpack and I am trying to add one hash value to the js file inside vueJS application whenever new build happened to avoid caching. Using webpack ExtendedApiPlugin tried to pass the hash value to the template.ejs file, but it throws error like Uncaught ReferenceError: __webpack_hash__ is not defined. Referred multiple forums and posts and everywhere it is mentioned similar like this, but it is not working for me as expected. I have defined the plugin in webpack.config.js file like below,

webpack.config.js

plugins: [
        new webpack.ExtendedAPIPlugin(),
        new HtmlWebpackPlugin({
            filename: path.resolve(__dirname, 'dist', 'index.html'),
            template: path.resolve(__dirname, 'src', 'template.ejs'),
            inject: true
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new VueLoaderPlugin()
    ]

webpack.config.dev.js

plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new WriteFilePlugin()
    ]

This is template.ejs file,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="shortcut icon" type="image/png" href="/images/favicon.png"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>My App</title>
    </head>
    <body>
        <% if (process.env.NODE_ENV === 'production') { %>
            <script type="text/javascript" src="/inject.js"></script>
        <% } %>
        <div id="my-app">
        </div>
    </body>
    <script> var val = __webpack_hash__; console.log("111111"); console.log(val) </script>
</html>

Is there any way to make this work or any other option to pass the hash value from webpack config to html file. Any help will be much appreciated.

Solution:

Found the solution after multiple attempts. We can use the following format to fetch the __webpack_hash__ value,

let webpackHash = <%= __webpack_hash__ %>;

To me this last code snippet looks like valid HTML, not EJS. Or am I getting something wrong? — Marcel, Apr 19 '23 at 06:08
@Marcel Sorry, missed to add few things. Updated code is my template.ejs — Deepak Kumar, Apr 19 '23 at 06:12
Is this just for usage with hot module replacement at development time? Then you could also force the browser to just never cache a file. It's in the Chrome Dev Tools for example: https://stackoverflow.com/a/7000899/79485 — Marcel, Apr 19 '23 at 12:08

Marcel · Answer 1 · 2023-04-19T06:23:13.783

Webpack by default replaces some variables in the build output.

You could do:

//vue.config.js

//Setting the environment variables
const child_process = require('child_process');
function git(command) {
    return child_process
        .execSync(`git ${command}`, { encoding: 'utf8' })
        .trim();
}
process.env.VUE_APP_VERSION = require('./package.json').version;
process.env.VUE_APP_GIT_VERSION = git('describe --always');
process.env.VUE_APP_GIT_AUTHOR_DATE = git('log -1 --format=%aI');

Then in the relevant file something like (this is just an example, no need to actually use this on an icon...):

<link
    rel="apple-touch-icon"
    href="<%= BASE_URL %>/img/icons/apple-touch-icon.png?v=<%= process.env.VUE_APP_GIT_VERSION %>"
/>

This will do the trick for circumventing any caching for each new build. And technically the git version is actually already a hash.

I have this working for an about page in my web app at https://github.com/suterma/replayer-pwa, if you want to look it up there.

Thanks for your response, So we cannot use ExtendedAPIPlugin ? That option will not work at all? — Deepak Kumar, Apr 19 '23 at 06:31
@DeepakKumar To be honest, I don't know. This is just my solution, it works, but there surely must be others, maybe even using this Plugin. — Marcel, Apr 19 '23 at 12:06

score 0 · Accepted Answer · answered Apr 19 '23 at 08:37

0

Found the solution after multiple attempts. We can use the following format to fetch the __webpack_hash__ value,

let webpackHash = <%= __webpack_hash__ %>;

answered Apr 19 '23 at 08:37

Deepak Kumar

21
5

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 21 '23 at 14:01

Is there a way to pass hash value from webpack to vueJS application

2 Answers2