webpack 的htmlwebpackplugin使用自定义模板

最新推荐文章于 2024-01-11 14:13:40 发布

weixin_30325971

最新推荐文章于 2024-01-11 14:13:40 发布

阅读量273

点赞数

文章标签： webpack javascript ViewUI

原文链接：http://www.cnblogs.com/yuweia/p/7457677.html

版权

　　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>

转载于:https://www.cnblogs.com/yuweia/p/7457677.html

weixin_30325971

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 的htmlwebpackplugin使用自定义模板

　　htmlwebpackplugin这个插件可以用来生成静态的html文件。默认内部是通过后台来生成一个html的文件。当然也可以自己使用自己的文件来生成模板。可以支持.html文件。也可以使用其他类型的模板。例如ejs。而ejs简单方便。很适合来生成我们所需的静态文件。htmlwebpackplugin的基本用法如下：首先需要在webpack的配置中require进来或者用es6...
复制链接

扫一扫