html-webpack-plugin用法全解

JinB 发布于2019-08-22 10:41 / 2176人阅读

摘要：所有的这些都是的功劳。默认为根据自己的指定的模板文件来生成特定的文件。最终在文件夹内会生成一个和文件。属性值为文件所在的路径名。默认值为不对生成的文件进行压缩。选项的作用主要是针对多入口文件。不用说，按照不同文件的依赖关系来排序。

本文只在个人博客和 SegmentFault 社区个人专栏发表，转载请注明出处
个人博客: https://zengxiaotao.github.io
SegmentFault 个人专栏: https://segmentfault.com/blog...

html-webpack-plugin 可能用过的 webpack 的童鞋都用过这个 plugin ,就算没用过可能也听过。我们在学习webpack的时候，可能经常会看到这样的一段代码。

// webpack.config.js
module.exports = {
    entry: path.resolve(__dirname, "./app/index.js"),
    output:{
        path: path.resolve(__dirname, "./build"),
        filename: "bundle.js"
    }
    ...
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

之后在终端输入 webpack 命令后

webpack

你会神奇的看到在你的 build 文件夹会生成一个 index.html 文件和一个 bundle.js 文件，而且 index.html 文件中自动引用 webpack 生成的 bundle.js 文件。

所有的这些都是 html-webpack-plugin 的功劳。它会自动帮你生成一个 html 文件，并且引用相关的 assets 文件(如 css, js)。

自己在六月第一次接触前端自动化构建，学习 webpack 和 react 时，曾经简单使用过这个插件，但也只是用了常见的几个选项，今天就跟着官方文档走一走，看看它的所有用法。

title

顾名思义，设置生成的 html 文件的标题。

filename

也没什么说的，生成 html 文件的文件名。默认为 index.html.

template

根据自己的指定的模板文件来生成特定的 html 文件。这里的模板类型可以是任意你喜欢的模板，可以是 html, jade, ejs, hbs, 等等，但是要注意的是，使用自定义的模板文件时，需要提前安装对应的 loader，否则webpack不能正确解析。以 jade 为例。

npm install jade-loader --save-dev

// webpack.config.js
...
loaders: {
    ...
    {
        test: /.jade$/,
        loader: "jade"
    }
}
plugins: [
    new HtmlWebpackPlugin({
        ...
        jade: "path/to/yourfile.jade"
    })
]

最终在build文件夹内会生成一个 yourfile.html 和 bundle.js 文件。现在我们再回头来看看之前将的 title 属性。

如果你既指定了 template 选项，又指定了 title 选项，那么webpack 会选择哪一个？事实上，这时候会选择你指定的模板文件的 title, 即使你的模板文件中未设置 title。

那么 filename 呢，是否也会覆盖，其实不是，会以指定的 filename 作为文件名。

inject

注入选项。有四个选项值 true, body, head, false.

true

默认值，script标签位于html文件的 body 底部

body

同 true

head

script 标签位于 head 标签内

false

不插入生成的 js 文件，只是单纯的生成一个 html 文件

favicon

给生成的 html 文件生成一个 favicon。属性值为 favicon 文件所在的路径名。

// webpack.config.js
...
plugins: [
    new HtmlWebpackPlugin({
        ...
        favicon: "path/to/yourfile.ico"
    }) 
]

生成的 html 标签中会包含这样一个 link 标签

同 title 和 filename 一样，如果在模板文件指定了 favicon，会忽略该属性。

minify

minify 的作用是对 html 文件进行压缩，minify 的属性值是一个压缩选项或者 false 。默认值为false, 不对生成的 html 文件进行压缩。来看看这个压缩选项。

html-webpack-plugin 内部集成了 html-minifier ,这个压缩选项同 html-minify 的压缩选项完全一样，
看一个简单的例子。

// webpack.config.js
...
plugins: [
    new HtmlWebpackPlugin({
        ...
        minify: {
            removeAttributeQuotes: true // 移除属性的引号
        }
    })
]


test minify


test minify

hash

hash选项的作用是给生成的 js 文件一个独特的 hash 值，该 hash 值是该次 webpack 编译的 hash 值。默认值为 false 。同样看一个例子。

// webpack.config.js
plugins: [
    new HtmlWebpackPlugin({
        ...
        hash: true
    })
]

执行 webpack 命令后，你会看到你的生成的 html 文件的 script 标签内引用的 js 文件，是不是有点变化了。
bundle.js 文件后跟的一串 hash 值就是此次 webpack 编译对应的 hash 值。

$ webpack
Hash: 22b9692e22e7be37b57e
Version: webpack 1.13.2

cache

默认值是 true。表示只有在内容变化时才生成一个新的文件。

showErrors

showErrors 的作用是，如果 webpack 编译出现错误，webpack会将错误信息包裹在一个 pre 标签内，属性的默认值为 true ，也就是显示错误信息。

chunks

chunks 选项的作用主要是针对多入口(entry)文件。当你有多个入口文件的时候，对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。

chunks 默认会在生成的 html 文件中引用所有的 js 文件，当然你也可以指定引入哪些特定的文件。

看一个小例子。

// webpack.config.js
entry: {
    index: path.resolve(__dirname, "./src/index.js"),
    index1: path.resolve(__dirname, "./src/index1.js"),
    index2: path.resolve(__dirname, "./src/index2.js")
}
...
plugins: [
    new HtmlWebpackPlugin({
        ...
        chunks: ["index","index2"]
    })
]

执行 webpack 命令之后，你会看到生成的 index.html 文件中，只引用了 index.js 和 index2.js

...

而如果没有指定 chunks 选项，默认会全部引用。

excludeChunks

弄懂了 chunks 之后，excludeChunks 选项也就好理解了，跟 chunks 是相反的，排除掉某些 js 文件。比如上面的例子，其实等价于下面这一行

...
excludeChunks: ["index1.js"]

chunksSortMode

这个选项决定了 script 标签的引用顺序。默认有四个选项，"none", "auto", "dependency", "{function}"。

"dependency" 不用说，按照不同文件的依赖关系来排序。

"auto" 默认值，插件的内置的排序方式，具体顺序这里我也不太清楚...

"none" 无序？不太清楚...

{function} 提供一个函数？但是函数的参数又是什么? 不太清楚...

如果有使用过这个选项或者知道其具体含义的同学，还请告知一下。。。

xhtml

一个布尔值，默认值是 false ，如果为 true ,则以兼容 xhtml 的模式引用文件。

总结

以上，就总结完了传入 new HtmlWebpackPlugin() 的选项，了解全部选项的含义后，可以在项目构建时更灵活的使用。

全文完

云服务器混合云超全解大数据技术全解阿里云服务器ecs配置全解嵌套用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91088.html

webpack学习笔记（3）-webpack使用

摘要：配置如上图测试用例所示，由于这个插件默认使用了来作优化，所以它不仅压缩了代码删掉了代码中无用的注释还去除了冗余的优化了的书写顺序，优化了你的代码。 webpack基本使用 // webpack4中除了正常安装webpack之外，需要再单独安一个webpack-cli npm i webpack webpack-cli -D 基本命令行 webpack [] 配置文件使用直接输...

wwq0327 2019-08-23 11:33 评论0 收藏0
仿掘金框架之listview全解（二）

摘要：文章首发程序员日记作者贤榆的鱼测试阅读时间前言我先把昨天那篇仿掘金框架之全解一中提到的，我们可以通过这个项目练习到的知识点再列举一下的基本用法的复用优化添加实现一些布局和功能通过和滚动监听实现上拉加载更多通过触摸监听事件实现上下的布局隐藏功 showImg(https://segmentfault.com/img/remote/1460000006795334); 文章首发：Andr...

eechen 2019-06-25 10:42 评论0 收藏0
仿掘金框架之listview全解（一）

摘要：当设为时，将不会在各个之间绘制默认为。当然这次仿掘金的用了实现了下拉刷新，后面会针对这个写一篇的大家也别急而这个中依然也用到了。 showImg(https://segmentfault.com/img/remote/1460000006788254); 文章首发：Android程序员日记作者：贤榆的鱼测试阅读时间：8min 前言有有很长一段时间没有更新了，这次给大家带来了一...

Acceml 2019-06-25 10:42 评论0 收藏0
html-webpack-plugin用法总结

摘要：默认不对文件进行压缩。中集成的，生成模板文件压缩配置，有很多配置项，这些配置项就是的压缩选项值。给生成的文件尾部添加一个值。错误信息是否写入文件。默认在文件中引用哪些文件用于多入口文件时。 title 生成页面的titile元素 filename 生成的html文件的文件名。默认index.html，可以直接配置带有子目录 //webpack.config.js ... plugins...

gplane 2019-08-23 11:59 评论0 收藏0
[js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配

摘要：还记得我们上文中的文件吗那里面的标签还是写死的文件，那么怎么把他们变成动态的文件，这个动态生成的文件会动态引入我们打包后生成的文件呢，我们可以使用插件，首先安装这个插件，好的，接下来就开始用这个插件了官方参考文档插件通用用法还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件，那么怎么把他们变成动态的index.html...

qpal 2019-08-22 11:08 评论0 收藏0