在執行 webpack
進行 bundle
的過程中,若有使用 hash 碼的話,那麼在改變檔案程式的時候再進行 bundle
時,這些 hash 碼都會變得不一樣了,也就是會產生新的檔案,那麼我們可以藉由使用 html-webpack-plugin
產生 html 檔,讓我們快速地找到應該替換的相關檔案:
html-webpack-plugin
$ npm install html-webpack-plugin --save-dev
webpack.config.js
新增以下程式:
…
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
…
plugins: [
…
new HtmlWebpackPlugin()
]
}
這個時候再執行 webpack
指令,就可以看到自動產生了 ./dist/index.html
檔,內容如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test here</title>
<link href="app.bundle.css" rel="stylesheet"></head>
<body>
<script type="text/javascript" src="ea10be53549cccd55720.manifest.js"></script>
<script type="text/javascript" src="05ef02be5a02714eab77.vendor.js"></script>
<script type="text/javascript" src="818c5540c4a1c3cbc0eb.app.js"></script>
<script type="text/javascript" src="7b53f76faf663d3f9746.another.js"></script>
</body>
</html>
也就是會自動將 bundle 好的所有 css、js等相關路徑,會直接都帶出來。
這裡有一些關於 html-webpack-plugin configuration 的說明,而這裡我將簡單介紹 chunks 的使用。
很簡單,目前是將所有 bundle 後的路徑都會放入到所產生的 ./dist/index.html
檔中,而若需要只載入特定檔案的話,假設我只放入 vendor
,修改 webpack.config.js
檔如下:
…
plugins: [
…
new HtmlWebpackPlugin({
chunks: ['vendor']
})
]
…
那麼執行 webpack
指令後,所產生的 ./dist/index.html
,就會只載入 vendor
的檔案,如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="05ef02be5a02714eab77.vendor.js"></script>
</body>
</html>
相反地,若將 chunks
改成 excludeChunks
,就會將除了 vendor
的檔案,都載入。
好啦,我想這就是 html-webpack-plugin
的基本使用了。
明天想來談談 webpack-manifest-plugin,敬請期待。