標籤：target ef6 自己的 外掛程式 name option head htm port
htmlwebpackplugin這個外掛程式可以用來產生靜態html檔案。預設內部是通過後台來產生一個html的檔案。當然也可以自己使用自己的檔案來產生模板。可以支援.html檔案。也可以使用其他類型的模板。例如ejs。而ejs簡單方便。很適合來產生我們所需的靜態檔案。
htmlwebpackplugin的基本用法如下：
首先需要在webpack的配置中require進來或者用es6的import：
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
然後在配置的plugins選項中引用外掛程式：
new HtmlWebpackPlugin({}),
支援的選項在 這裡 可以查看 ，他支援產生多個index。只需要在plugins中多次引入即可：
注意：這樣引入多個還是只會產生預設的index.html.所以需要多個不同的html時。每次引入都要單獨的配置，引入html作為模板很簡單。只需要提供相應的屬性就可以。
new HtmlWebpackPlugin({ title:‘my first webpack‘, template:‘index.html‘ })
然後是需要用ejs來產生需要的html檔案，用ejs的話就需要相應的ejs-loader,否則你在ejs裡面寫<%=htmlwebpack.options.xx%>會報錯。因為他處理不了ejs類型檔案。在module裡面加上對ejs類型檔案的處理即可：
module: { rules: [ {test:/\.ejs$/,use:[‘ejs-loader‘]}, { test: /\.css$/, use: [‘style-loader‘, ‘css-loader‘] }, { test: /\.(gif|png|svg|jpg)/, use: [‘file-loader‘] } ] }
然後在htmlwebpackplugin的配置裡面加上如下配置：
new HtmlWebpackPlugin({
//title title:‘my first webpack‘, //模板所在位置
template:‘index.ejs‘,
//其他任意資料 name:‘123124‘, data:‘454564457‘ })
在index.ejs裡面如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title><%=htmlWebpackPlugin.options.title%></title></head><body> <p><%=htmlWebpackPlugin.options.name%></p> <p><%=htmlWebpackPlugin.options.data%></p></body></html>
使用webpack編譯組建檔案如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>my first webpack</title></head><body> <p>123124</p> <p>454564457</p><script type="text/javascript" src="app.40d7ef6bd624409cbedf.js"></script></body></html>
webpack 的htmlwebpackplugin使用自訂模板
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
