1. 程式人生 > >webpack 的htmlwebpackplugin使用自定義模板

webpack 的htmlwebpackplugin使用自定義模板

支持 不同的 ef6 blog mon lang rul 自定義 mod

  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使用自定義模板