HTML Webpack Plugin 插件参数学习

最新推荐文章于 2024-05-16 09:55:01 发布

guyue_01

最新推荐文章于 2024-05-16 09:55:01 发布

阅读量1.4k

点赞数

分类专栏： webpack 文章标签： webpack 插件

本文链接：https://blog.csdn.net/guyue_01/article/details/52913085

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这是一个webpack插件，简化了HTML文件的创建，以便为您的webpack包提供服务。这对于在文件名中包含更改每个编译的哈希的webpack包尤其有用。您可以让插件为您生成一个HTML文件，使用lodash模板提供您自己的模板或使用您自己的加载器。

安装

$ npm install html-webpack-plugin --save-dev

基本用法

这个插件生成一个HTML5文件，其中包括在body中用script标签包含的所有webpack包；
在webpack.config.js文件中添加一个插件，代码如下：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  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的入口点，它们在生成的HTML文件中包含在script标签里。
如果您在webpack的输出中有任何CSS资源（例如，使用ExtractTextPlugin提取的CSS），那么这些将会包含在HTML头中的标记中。

配置

您可以将配置选项的哈希传递给HtmlWebpackPlugin。允许值如下：

title: 用在生成的html文档中
filename: 要将HTML写入的文件。默认为index.html。您也可以在这里指定一个子目录（例如：assets / admin.html）。
template: webpack需要模版的路径，详细请看文档
inject : true | 'head' | 'body' | false 将所有资源注入给定模板或templateContent - 传递true或“body”时，所有javascript资源将放置在body元素的底部。 ‘head’将脚本放在head元素中。
favicon : 将给定的favicon路径添加到输出的html。（此处为谷歌翻译，感觉不通畅，有更好翻译的请指正）
minify: {...} | false 通过html-minifier参数对象压缩输出文件
hash: true | false 如果为true，则将一个唯一的webpack编译的hash值附加到所有包含的脚本和CSS文件上。这对缓存清除很有用。
cache: true | false如果为ture（默认值），尝试仅在更改文件时才emit文件；（此处的emit不知该如何翻译，原句：if true (default) try to emit the file only if it was changed.）
showErrors:true | false如果为true（默认值）错误信息将被写在html页面中
chunks:允许您只添加一些chunks（例如，只有单元测试chunks）
chunksSortMode: 允许控制在chunks被包括到html之前如何排序块。允许值：’none’| ‘auto’| ‘dependency’| {function} - default：’auto’
excludeChunks: 允许跳过一些chunks（例如：不添加unit-test chunk）
xhtml:true | false如果为true，则将链接标记呈现为自我关闭，符合XHTML。默认值为false
####一个webpack config 例子说明如何使用这些参数：

{
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      filename: 'assets/admin.html'
    })
  ]
}

guyue_01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML Webpack Plugin 插件参数学习

这是一个webpack插件，简化了HTML文件的创建，以便为您的webpack包提供服务。这对于在文件名中包含更改每个编译的哈希的webpack包尤其有用。您可以让插件为您生成一个HTML文件，使用lodash模板提供您自己的模板或使用您自己的加载器。安装$ npm install html-webpack-plugin --save-dev基本用法这个插件生成一个HTML5文件，其中包括在b
复制链接

扫一扫