html-webpack-plugin用法全解

2024年5月4日 250次阅读 来源: 499311496

本文只在个人博客和 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 标签

<link rel="shortcut icon" href="example.ico">

同 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 // 移除属性的引号
        }
    })
]
<!-- 原html片断 -->
<div id="example" class="example">test minify</div>
<!-- 天生的html片断 -->
<div id=example class=example>test minify</div>

hash

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

// webpack.config.js
plugins: [
    new HtmlWebpackPlugin({
        ...
        hash: true
    })
]
<script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>

实行 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

...
<script type=text/javascript src=index.js></script>
<script type=text/javascript src=index2.js></script>

而假如没有指定 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() 的选项，相识悉数选项的寄义后，能够在项目构建时更天真的运用。

全文完

    原文作者：499311496
    原文地址: https://segmentfault.com/a/1190000007294861
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞