Webpack最常用的插件：HTMLWebpackPlugin

今天介绍一款最常用的webpack插件：HTMLWebpackPlugin。不夸张的说它是使用webpack开发前端项目的必备插件，因为它可以自动帮我们将webpack打包生成的文件（比如js文件，css文件）嵌入到html文件中。这在生成带有哈希的文件时特别有用。在webpack配置文件中引入HtmlWebpackPlugin插件，然后通过newHtmlWebpackPlugin()在plugins数组中添加HtmlWebpackPlugin实例对象。//webpack.config.jsconstHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={entry:'./src/index.js',output:{filename:'app.[contenthash:8].js',},mode:'production',plugins:[newHtmlWebpackPlugin()],}我们执行npxwebpack命令后，webpack会额外为我们生成一个dist/index.html文件。html文件的格式化内容为：你可以看到打包后的app.js文件自动嵌入到了head元素下的最后一个子元素中。这里在包文件名的末尾添加了contenthashstring，意思是每次项目内容发生变化时，hashstring的值都不一样。试想一下，如果自己管理html文件，每次都要改js文件的名字，该有多累。幸运的是，HtmlWebpackPlugin可以提供帮助。当然，前面的只是HtmlWebpackPlugin插件的默认用法，我们可以做更具体的定制。对于一些常用的属性，我们需要传入一个配置对象来自定义模板渲染。HtmlWebpackPlugin的配置非常丰富，但常用的就那么几个。plugins:[newHtmlWebpackPlugin({title:'前端西瓜哥的博客',favicon:'static/favicon.ico',}),],title:设置网页标题。filename：生成html文件名，默认值为index/html。template：使用自己的模板，这里填写这个模板的路径，使用之后，一些配置项会失效，比如title。favicon：指定网站图标的路径。除了在html上填充favicon相关内容外，它还会将文件复制到打包文件夹中，非常好用。minify：是否压缩html文件。不设置时，如果webpack的模式为production，html将被压缩以去除多余的空格和注释。使用自定义html模板在实际开发中，通常会创建一个index.html作为模板提供给HtmlWebpackPlugin插件。这样title等配置和一些更细的内容就可以直接写到html中了。与配置相比，直接在html上编辑更直观。我们在根目录下创建一个index.html作为模板：/head>这样可以直接在html模板中添加title，也可以通过cdn的形式添加一些第三方库。webpack.config.js配置改为：plugins:[newHtmlWebpackPlugin({template:'index.html'}),]，生成的html为：三方库建议使用自己本地的项目，会更稳定安全。比如上面建议改成。这里会使用一个copy-webpack-plugin插件，将一些文件或文件夹复制到打包目录中。这个插件我会另外写一篇文章，这里就不展开了。自定义html注入变量webpack支持使用lodash.template()进行变量注入。我们将模板html更改为以下内容：<%=htmlWebpackPlugin.options.saySomething%>配置改为:plugins:[newHtmlWebpackPlugin({template:'index.html',title:'前端西瓜哥的博客',//下面是自定义属性saySomething:'保持饥饿，保持愚蠢'}),],which将传递给HtmlWebpackPlugin的配置属性将成为htmlWebpackPlugin.options对象下的属性并嵌入到模板html中。所以这里生成的结果是：保持饥饿状态，保持傻状态由于lodash.template用于丰富的模板渲染，除了嵌入变量值外，还支持判断条件、循环等特性，基本可以满足我们的大部分场景。结束HTMLWebpackPlugin是一个广泛使用的webpack插件，可以自动将我们打包的文件嵌入到模板HTML中。在实际开发中，我们通常使用自己编写的html模板。