如何在 html 标题中使用 webpack 哈希？

【问题标题】：how can i use webpack hash in html title?如何在 html 标题中使用 webpack 哈希？
【发布时间】：2020-11-11 06:38:51
【问题描述】：

我对 webpack 很陌生，我的 webpack.config.js：

plugins: [
    new HtmlWebpackPlugin({
        hash: true,
        templateParameters:{title: '[name].[contenthash]' },
        inject: true,
    }), 
],

在我的 index.ejs 中：

<title><%= title %></title>

但在我的out/index.html中，标题只有：

<title>[name].[contenthash]</title>

期待：

 <title>app.7472b25c2ed347463dbc</title>

我该如何解决？

【问题讨论】：

这能回答你的问题吗？ Webpack compilation hash in client code

标签： javascript html webpack html-webpack-plugin

【解决方案1】：

2020-11-13 更新

最后，我发现可以像这样使用全局变量：webpack_hash：

    <title><%=  'hash'+__webpack_hash__  %></title>

我们可以直接在 index.ejs 中使用，不需要在 webpack.config.js 中做任何事情

初始版本

webpack.config.js：

plugins: [
        new HtmlWebpackPlugin({
            // 1. title is the parameter, you can use in ejs template
            templateParameters:{
                title: JSON.stringify(someting: 'something'),
            },
        }), 


        //2. BUILT_AT is a parameter too. can use it.
        new webpack.DefinePlugin({
            BUILT_AT: webpack.DefinePlugin.runtimeValue(Date.now,"some"),

        }),

        //3. for webpack5, you can use global variable: __webpack_hash__
        //new webpack.ExtendedAPIPlugin()
    ],
    //4. this is not variable, this is module, so use 'import tt' to use it.
    externals: { 
        'ex_title': JSON.stringify({
            tt: 'eitentitle',
        })
    },

【讨论】：