webpack---htmlWbpackPlugin插件在webpack中的应用

最新推荐文章于 2024-05-15 17:53:26 发布

武东10号

最新推荐文章于 2024-05-15 17:53:26 发布

阅读量1.3k

点赞数

分类专栏： webpack 文章标签：插件 webpack htmlPlugin webpack插件

本文链接：https://blog.csdn.net/Wbiokr/article/details/72825725

版权

webpack 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

安装

cnpm install html-webpack-plugin

配置

title://生成的html文件的title

filename://生成的html文件名字

template://webpack引入的源html文件，2.0允许使用任何loader：直接使用字符串路劲(./index.html);前置loader(!!handlebars!./index.hbs);配置module.loader使用。

inject: //添加位置:false-不添加,true-自动添加,head-添加至头部,body-添加至body

favicon://图标路径

minify://{options},collapseWhitespace压缩去除空格，minifyJS压缩JS等等；

hash://true代表给所有webpack打包的css js文件添加hash值，false反之

cache://true代表仅打包更改的文件

showError://true时候错误信息将会被备注于html中

chunks://当前htmlWebpackPlugin对象中引入当前html文件所需的chunk块；

chunksSordMode://分类

excludeChunks://除了value(chunk数组)值外都引入；

xhtml://默认false

使用

webpack.config.js:

const htmlWebpackPlugin=require('html-webpack-plugin');
const path=require('path');

module.exports={
    entry:'./src/a.js',
    output:{
        path:path.resolve('./dist'),
        filename:'js/bundel.[name].js'
    },
    plugins:[
        new htmlWebpackPlugin({
            template:'a.html',
            filename:'a1.html',
        })
    ]
}

a.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
</body>
</html>

运行webpack，dist目录下得到a1.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src='./dist/bundel.a.js'></script>
</body>
</html>

绑定数据

htmlwebpackplugin插件支持在源html文件中像template语法一样给视图绑定数据

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title  %></title>
</head>
<body>
<%= htmlWebpackPlugin.options.data%>
</body>
</html>,

webpack.config.js:

const path=require('path');
const htmnlWbpackPlugin=require('html-webpack-plugin');
module.exports={
    entry:'./src/script/b.js',
    output:{
        path:path.resolve('./dist'),
        filename:'js/[name].bundle.js',

    },
    plugins:[
        new htmnlWbpackPlugin({
            template:'index.html',
            filename:'home.html',
            inject:false,
            title:'webpack',
            data:'aaaaaa'
        })
    ]
}

运行webpack，得到home.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
</head>
<body>
aaaaaa
</body>
</html>,

多组html打包

webpack.config.js:

const path=require('path');
const htmnlWbpackPlugin=require('html-webpack-plugin');
module.exports={
    entry:{page1:'./src/script/b.js',
            page2:  ['./src/script/main.js','./src/script/a.js']
           },
    output:{
        path:path.resolve('./dist'),
        filename:'js/[name].[hash].js',
        publicPath:'http://cdn.com/'
    },
    plugins:[
        new htmnlWbpackPlugin({
            template:'index.html',
            filename:'home.html',
            chunk:['page1','page2'],
            title:'webpack is good',
            data:'aaaaaa'
        }),
        new htmnlWbpackPlugin({
            filename:'product.html',
            template:'pro.html',
            excludeChunks:['page2']
        })
    ]
}

武东10号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack---htmlWbpackPlugin插件在webpack中的应用

安装cnpm install html-webpack-plugin配置title://生成的html文件的titlefilename://生成的html文件名字template://webpack引入的源html文件，2.0允许使用任何loader：直接使用字符串路劲(./index.html);前置loader(!!handlebars!./index.hbs);配置module.loader使
复制链接

扫一扫

专栏目录