Webpack 2 實作筆記 (2) — HTML Webpack Plugin

HTML Webpack Plugin 可以讓你產生 HTML ,也可以讓你自訂想要的 template,例如 Pug

Webpack 2 — HTML Webpack Plugin

安裝 html-webpack-plugin

$ yarn add -D html-webpack-plugin

設定 webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: 'dist',
filename: 'app.bundle.js'
},
plugins: [
new HtmlWebpackPlugin()
],
}

其中原本的:

filename: './dist/app.bundle.js'

拆成:

path: 'dist',
filename: 'app.bundle.js'

按照 html-webpack-plugin 官方文件要拆成兩段 pathfilename,這樣 plugin 才能知道要在 dist 目錄產生 HTML,並且在 HTML 自動注入 app.bundle.js

其他選項設定

...
plugins: [
new HtmlWebpackPlugin({
minify: {
collapseWhitespace: true, // 壓縮 HTML
},
hash: true, // 會幫 app.bundle.js 加上 hash
template: './src/index.html' // 自訂 template,後面會講怎麼使用 pug,自訂完要自己產生一個 index.html
})
],
...
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.