的WebPack替换的占位符同捆散列的index.htm

我的目标是在我的index.html文件替换像的WebPack替换的占位符同捆散列的index.htm

<!--configjs-->

一个字符串

<script src="/api/config?bundle-hash"></script>

我使用https://github.com/AngularClass/NG6-starter

plugins: [ 
    // Injects bundles in your index.html instead of wiring all manually. 
    // It also adds hash to all injected assets so we don't have problems 
    // with cache purging during deployment. 
    new HtmlWebpackPlugin({ 
     template: 'client/index.html', 
     inject: 'body', 
     hash: true 
    }) 
]

来源

2016-09-25 Whisher

你想使用html-webpack-plugin

配置插件，（我认为你想把注入转为false让你更好的控制）。

// webpack.config.js 
plugins: [new HtmlWebpackPlugin(
    { 
     inject : false, 
     template : 'index.html' 
    } 
)]

并在您的html模板中按名称调出块。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 
    <script src="<%= htmlWebpackPlugin.files['bundle-hash'].entry %>"></script> 
    </head> 
    <body> 
    </body> 
</html>

我并不完全确定您的确切需求，但您可能只需使用插件默认值即可获取所需内容。该插件可以将现有的html文件作为模板，并将头部CSS和脚本插入到主体中。如果你想要更多的控制，你可以做我上面提出的。

来源

2016-09-25 15:52:27 cgatian

谢谢@cgatian但它不工作替换缺少与注入：假或注入：真，但我必须设置为'身体'来管理脚本标记我的意思是如果我窥视到html源我仍然看到<％= htmlWebpackPlugin.files ['bundle-hash']。entry％> – Whisher

我已经用当前的HtmlWebpackPlugin更新了我的帖子 – Whisher

我不得不使用'htmlWebpackPlugin.files.chunks.main.entry'。只要将'<％= JSON.stringify（htmlWebpackPlugin.files）％>'放入你的html中，并亲自看看路径应该如何。 – velop

的WebPack替换的占位符同捆散列的index.htm

回答

相关问题