html-webpack-plugin详解

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

路飞说了

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

阅读量138

点赞数

分类专栏： React 文章标签： React webpack

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

引言

最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：

为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

有了这种插件，那么在项目中遇到类似上面的问题都可以轻松的解决。

在本人项目中使用html-webpack-plugin，由于对该插件不太熟悉，开发过程中遇到这样或者那样的问题，下面就来说说这个插件
###html-webpack-plugin
插件的基本作用就是生成html文件。原理很简单：

将 webpack中entry配置的相关入口chunk 和 extract-text-webpack-plugin抽取的css样式插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个html文件，具体插入方式是将样式link插入到head元素中，script插入到head或者body中。

实例化该插件时可以不配置任何参数，例如下面这样：

var HtmlWebpackPlugin = require('html-webpack-plugin')
webpackconfig = {
    ...
    plugins: [
        new HtmlWebpackPlugin()
        ]
}

不配置任何选项的html-webpack-plugin插件，他会默认将webpack中的entry配置所有入口chunk和extract-text-webpack-plugin抽取的css样式都插入到文件指定的位置。例如上面生成的html文件内容如下：

<!DOCTYPE html>
 <html>
<head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  <link href="index-af150e90583a89775c77.css" rel="stylesheet"></head>
  <body>
  <script type="text/javascript" src="common-26a14e7d42a7c7bbc4c2.js"></script>
  <script type="text/javascript" src="index-af150e90583a89775c77.js"></script></body>
</html>

当然可以使用具体的配置项来定制化一些特殊的需求，那么插件有哪些配置项呢？

html-webpack-plugin配置项

插件提供的配置项比较多，通过源码可以看出具体的配置项如下：

 this.options = _.extend({
template: path.join(__dirname, 'default_index.ejs'),
filename: 'index.html',
hash: false,
inject: true,
compile: true,
favicon: false,
minify: false,
cache: true,
showErrors: true,
chunks: 'all',
excludeChunks: [],
title: 'Webpack App',
xhtml: false

}, options);

title: 生成的html文档的标题。配置该项，它并不会替换指定模板文件中的title元素的内容，除非html模板文件中使用了模板引擎语法来获取该配置项值，如下ejs模板语法形式：

<title>{%= o.htmlWebpackPlugin.options.title %}</title>

filename：输出文件的文件名称，默认为index.html，不配置就是该文件名；此外，还可以为输出文件指定目录位置（例如’html/index.html’）

关于filename补充两点：

1、template配置项在html文件使用file-loader时，其所指定的位置找不到，导致生成的html文件内容不是期望的内容。
2、为template指定的模板文件没有指定任何loader的话，默认使用ejs-loader。如template: ‘./index.html’，若没有为.html指定任何loader就使用ejs-loader

templateContent: string|function，可以指定模板的内容，不能与template共存。配置值为function时，可以直接返回html字符串，也可以异步调用返回html字符串。

inject：向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同。

1、true或者body：所有JavaScript资源插入到body元素的底部
2、head: 所有JavaScript资源插入到head元素中
3、false：所有静态资源css和JavaScript都不会注入到模板文件中

favicon: 添加特定favicon路径到输出的html文档中，这个同title配置项，需要在模板中动态获取其路径值
hash：true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值，添加hash形式如下所示：
```
`html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>`
```
chunks：允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；
excludeChunks: 这个与chunks配置项正好相反，用来配置不允许注入的thunk。
chunksSortMode: none | auto| function，默认auto；允许指定的thunk在插入到html文档前进行排序。

function值可以指定具体排序规则；auto基于thunk的id进行排序； none就是不排序
xhtml: true|fasle, 默认false；是否渲染link为自闭合的标签，true则为自闭合标签
cache: true|fasle, 默认true；如果为true表示在对应的thunk文件修改后就会emit文件
showErrors: true|false，默认true；是否将错误信息输出到html页面中。这个很有用，在生成html文件的过程中有错误信息，输出到页面就能看到错误相关信息便于调试。
minify: {…}|false；传递 html-minifier 选项给 minify 输出，false就是不使用html压缩，minify具体配置参数请点击html-minifier

下面的是一个用于配置这些属性的一个例子：

new HtmlWebpackPlugin({
      title:'rd平台',
      template: 'entries/index.html', // 源模板文件
      filename: './index.html', // 输出文件【注意：这里的根路径是module.exports.output.path】
      showErrors: true,
      inject: 'body',
      chunks: ["common",'index']
  })

配置多个html页面

html-webpack-plugin的一个实例生成一个html文件，如果单页应用中需要多个页面入口，或者多页应用时配置多个html时，那么就需要实例化该插件多次；

即有几个页面就需要在webpack的plugins数组中配置几个该插件实例：

    ...
plugins: [
    new HtmlWebpackPlugin({
         template: 'src/html/index.html',
          excludeChunks: ['list', 'detail']
    }),
    new HtmlWebpackPlugin({
        filename: 'list.html',
        template: 'src/html/list.html',
        thunks: ['common', 'list']
    }), 
    new HtmlWebpackPlugin({
      filename: 'detail.html',
      template: 'src/html/detail.html',
       thunks: ['common', 'detail']
    })
]
...

如上例应用中配置了三个入口页面：index.html、list.html、detail.html；并且每个页面注入的thunk不尽相同；类似如果多页面应用，就需要为每个页面配置一个；

文章内容引自：https://www.cnblogs.com/wonyun/p/6030090.html

路飞说了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html-webpack-plugin详解

引言最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口有了这种插件，那么...
复制链接

扫一扫