webpack5和4的区别 webpack使用教程

文章插图
概念HTML Webpack Plugin这是一个webpack插件，它简化了HTML文件的创建，以服务于你的webpack bundle 。这对于在文件名中包含哈希的webpack包特别有用，因为文件名会改变每次编译。您可以让插件为您生成一个HTML文件，或者使用lodash模板提供您自己的模板，或者使用您自己的加载器。
安装针对webpack的版本，需要安装对应不同的版本。
webpack4
npm i --save-dev html-webpack-plugin@4webpack5
npm i --save-dev html-webpack-plugin使用这个插件会为你生成一个HTML5文件，其中包含了使用script标签的所有webpack的bundle 。
只需将插件添加到webpack配置中，如下所示：
const path = require("path")const HtmlWebpackPlugin = require("html-webpack-plugin")module.exports = {entry: "./src/index.js",output: {filename:"index_bundle.js",path: path.resolve(__dirname,"dist")},plugins: [new HtmlWebpackPlugin()]}这将生成一个包含以下内容的文件dist/index.html：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Webpack App</title></head><body><script src="https://www.520longzhigu.com/diannao/index_bundle.js"></script></body></html>如果您有多个webpack入口点，它们都将与script标签一起包含在生成的HTML中。
如果你在webpack的输出中有任何CSS资产(例如，用mini-css-extract-plugin提取的CSS)，那么这些将包含在HTML头部的标签中。
如果你有使用它的插件，html-webpack-plugin应该在任何集成插件之前。
选项你可以传递一个配置选项到html-webpack-plugin 。允许的值如下：
title类型：String
默认值：Webpack App
描述：要用于生成的HTML文档的标题。
filename类型：String或Function
默认值：index.html
描述：要写入HTML的文件的文件名。默认为index.html 。您也可以在这里指定一个子目录(例如:assets/admin.html) 。占位符[name]将被条目名称替换。也可以是一个函数，例如(entryName) => entryName + ‘.html’ 。
template类型：String
默认值：空
描述：默认情况下，它将使用src/index.ejs(如果存在的话) 。
templateContent类型：string|Function|false
默认值：false
描述：可以用来代替模板提供一个内联模板。
templateParameters类型：Boolean|Object|Function
默认值：false
描述：允许覆盖模板中使用的参数。
inject类型：Boolean|String
默认值：true
描述：true || ‘head’ || ‘body’ || false将所有资产注入到给定的模板或templateContent中。当传递’body’时，所有javascript资源将被放置在body元素的底部。’head’将把脚本放置在head元素中。设置为true时，将根据scriptLoading选项，决定是把脚本添加到head还是body中。使用false禁用自动注入。
publicPath类型：String|’auto’
默认值：auto
描述：publicPath属性值用于script和link 标签。
scriptLoading类型：blocking|defer
默认值：defer
描述：现代浏览器支持非阻塞javascript加载(“defer”)，以提高页面启动性能。
favicon类型：String
默认值：空
描述：将给定的图标路径添加到输出的HTML中。
meta类型：Object
默认值：{}
描述：允许注入meta标签。例如:meta: {viewport: ‘width=device-width, initial-scale=1, shrink-to-fit=no’} 。
base类型：Object|String|false
默认值：false
描述：注入一个base标签。如base:“https://example.com/path/page.html
minify类型：Boolean|Object

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：