Webpack 2 實作筆記 (7) — Multiple templates options and RimRaf

如何建立多個 template 以及如何在 build 之前刪除 dist 資料夾。

Webpack 2 — Multiple templates options and RimRaf

在每次 build 之前清除舊的 dist 目錄

在每次執行 yarn run build 之前,刪除 ./dist

安裝 rimraf

$ yarn add -D rimraf

設定 package.json

...
"scripts": {
"dev": "webpack-dev-server",
"build": "yarn run clean && webpack -p",
"clean": "rimraf ./dist/*"
},
...

建立多個 template

webpack.config.js 增加一個 Contact template:

...
plugins: [
new HtmlWebpackPlugin({
hash: true,
template: './src/index.html'
}),
new HtmlWebpackPlugin({
hash: true,
filename: 'contact.html', // 指定 template 要輸出的路徑
template: './src/contact.html'
}),
...
],
...

其中 filename: 'contact.html',可以指定 template 要輸出的路徑,因為 output設定的路徑就是 path: path.resolve(__dirname, 'dist'),也就是 dist/,所以最終檔案就是會被輸出到那裡。

也可以按需求改變路徑,例如:

filename: './../contact.html

會被輸出到專案根目錄底下。

接著再建立一個 src/contact.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Contact page</h1>
</body>
</html>

執行 yarn run dev ,到 localhost:8080/contact.html 可以看到成果。再執行 yarn run build 就可以看到 contact.html 被輸出到 dist

如何在不同的 template 注入不同的 bundle.js

建立一個 src/contact.js,加上:

console.log('Contact me Baby');

多了一個新的 entry file,如果想要多個 output files 多個 bundle files,就要重新設定 entry,加上多個 entry files。

修改 webpack.config.js

...
entry: {
app: './src/app.js',
contact: './src/contact.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
...

把原本的 entry: './src/app.js' 改成物件:

entry: {
app: './src/app.js',
contact: './src/contact.js'
}

這樣就可以加入多個 entry files。

因為想要一一輸出每個 entry files,所以把 filename: 'app.bundle.js' 的檔名改成能動態產生相對應的檔名:

filename: '[name].bundle.js'

[name] 會對應到 entry 的 key。

執行 yarn run dev ,到 localhost:8080 瀏覽頁面,不過看起來目前兩個 template 都注入兩個 bundle files,app.bundle.jscontact.bundle.js

為了要讓 index.html 只注入 app.bundle.js,而 contact.html 只注入 contact.bundle.js,要修改一下設定:

webpack.config.js

...
plugins: [
new HtmlWebpackPlugin({
hash: true,
excludeChunks: ['contact'], // 排除 contact.bundle.js
template: './src/index.html'
}),
new HtmlWebpackPlugin({
hash: true,
chunks: ['contact'], // 指定 contact.bundle.js
filename: 'contact.html',
template: './src/contact.html'
}),
...
],
...

再執行一次 yarn run dev,就可以看到各就各位了:

Show your support

Clapping shows how much you appreciated Toumasaya’s story.