webpack 的htmlwebpackplugin使用自定義模板

時間 2019-11-16

標籤 webpack htmlwebpackplugin 使用自定義模板简体版

原文原文鏈接

　　htmlwebpackplugin這個插件能夠用來生成靜態的html文件。默認內部是經過後臺來生成一個html的文件。固然也能夠本身使用本身的文件來生成模板。能夠支持.html文件。也可使用其餘類型的模板。例如ejs。而ejs簡單方便。很適合來生成咱們所需的靜態文件。javascript

htmlwebpackplugin的基本用法以下：css

首先須要在webpack的配置中require進來或者用es6的import：html

const HtmlWebpackPlugin = require('html-webpack-plugin');

而後在配置的plugins選項中引用插件：java

new HtmlWebpackPlugin({}),

支持的選項在這裏能夠查看，他支持生成多個index。只須要在plugins中屢次引入便可：webpack

注意：這樣引入多個仍是隻會生成默認的index.html.因此須要多個不一樣的html時。每次引入都要單獨的配置，引入html做爲模板很簡單。只須要提供相應的屬性就能夠。git

new HtmlWebpackPlugin({
            title:'my first webpack',
            template:'index.html'
 })

而後是須要用ejs來生成須要的html文件，用ejs的話就須要相應的ejs-loader,不然你在ejs裏面寫<%=htmlwebpack.options.xx%>會報錯。由於他處理不了ejs類型文件。在module裏面加上對ejs類型文件的處理便可：es6

module: {
        rules: [
            {test:/\.ejs$/,use:['ejs-loader']},
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.(gif|png|svg|jpg)/, use: ['file-loader'] }
        ]
    }

而後在htmlwebpackplugin的配置裏面加上以下配置：github

  new HtmlWebpackPlugin({
           //title
            title:'my first webpack',
            //模板所在位置
            template:'index.ejs',
           //其餘任意數據
            name:'123124',
            data:'454564457'
        })

在index.ejs裏面以下：web

<!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編譯生成文件以下：app

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。