的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

回答

相關問題