html-webpack-plugin详解

最新推荐文章于 2024-07-18 09:55:35 发布

yinjing8435

最新推荐文章于 2024-07-18 09:55:35 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/yinjing8435/article/details/70917477

版权

本文详细介绍了html-webpack-plugin的使用，包括它的基本作用、配置项、如何配置多个html页面、自定义模板以及模板上下文数据。该插件主要用于在html文件中自动引入webpack打包的资源，并能生成多页面入口。文章还提到了插件事件，允许开发者通过插件事件来自定义html内容的生成方式。

摘要由CSDN通过智能技术生成

引言

最近在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`配置的相关入口thunk  和  `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配置所有入口thunk和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:

最低0.47元/天解锁文章

yinjing8435

关注

0
点赞
踩
2

收藏

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

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

扫一扫