webpack使用教程（webpack5和4的区别）

程序员文章站 2023-12-01 18:29:04

概念html webpack plugin这是一个webpack插件，它简化了html文件的创建，以服务于你的webpack bundle。这对于在文件名中包含哈希的webpack包特别有用，因为文件...

概念

html webpack plugin这是一个webpack插件，它简化了html文件的创建，以服务于你的webpack bundle。这对于在文件名中包含哈希的webpack包特别有用，因为文件名会改变每次编译。您可以让插件为您生成一个html文件，或者使用lodash模板提供您自己的模板，或者使用您自己的加载器。

安装

针对webpack的版本，需要安装对应不同的版本。

webpack4

npm i --save-dev html-webpack-plugin@4

webpack5

  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="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

默认值：如果mode为’production’则为true，否则为false

描述：控制是否以及以何种方式压缩输出。

hash

类型：boolean

默认值：false

描述：如果为true，则附加一个唯一的webpack编译哈希到所有包含的脚本和css文件。这对于缓存销毁是很有用的

cache

类型：boolean

默认值：true

描述：只有当文件被更改时，才会删除它。

showerrors

类型：boolean

默认值：true

描述：错误的详细信息将写入html页面。

chunks

类型：?

默认值：?

描述：只允许添加一些chunk(例如：只添加unit-test 的chunk)

chunkssortmode

类型：string|function

默认值：auto

描述：允许控制块在包含到html之前应该如何排序。允许的值是’none’ | ‘auto’ | ‘manual’ | {function}。

excludechunks

类型：array.<string>

默认值：空

描述：允许你跳过一些chunk(例如不添加unit-test 的chunk)。

xhtml

类型：boolean

默认值：false

描述：如果为true，则将link标签呈现为自动关闭(xhtml兼容)

下面是一个webpack配置示例，演示了如何使用这些选项：

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new htmlwebpackplugin({
      title: 'my app',
      filename: 'assets/admin.html'
    })
  ]
}

生成多个html文件

要生成多个html文件，请在插件数组中多次声明插件。

配置示例：

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new htmlwebpackplugin(), // generates default index.html
    new htmlwebpackplugin({  // also generate a test.html
      filename: 'test.html',
      template: 'src/assets/test.html'
    })
  ]
}

编写模板

如果默认生成的html不能满足您的需要，您可以提供自己的模板。最简单的方法是使用template选项并传递一个定制的html文件。html-webpack-plugin会自动将所有必需的css, js, manifest和favicon文件注入到标记中。

配置文件的部分内容：

plugins: [
  new htmlwebpackplugin({
    title: 'custom template',
    // load a custom template (lodash by default)
    template: 'index.html'
  })
]

模板文件index.html的内容：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title><%= htmlwebpackplugin.options.title %></title>
  </head>
  <body>
  </body>
</html>

如果您已经有一个模板加载器，您可以使用它来解析模板。请注意，如果您指定了html加载器并使用.html文件作为模板，也会发生这种情况。

module: {
  loaders: [
    { test: /\.hbs$/, loader: "handlebars-loader" }
  ]
},
plugins: [
  new htmlwebpackplugin({
    title: 'custom template using handlebars',
    template: 'index.hbs'
  })
]

您可以使用现成的lodash语法。如果inject特性不适合你的需要，而你又想完全控制资产的位置，可以使用html-webpack-template项目的默认模板作为你自己编写模板的起点。

上一篇： git下载分支代码到本地（git提交代码命令）

下一篇： Photoshop为美女图片打造出超酷的火焰壁纸效果

webpack使用教程（webpack5和4的区别）

概念

安装

使用

选项

生成多个html文件

编写模板

Webpack中css-loader和less-loader的使用教程