Question 49904 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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__ %>;

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

    let webpackHash = <%= __webpack_hash__ %>;


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search