Christian-freedom / StudyNotes2017

学习笔记
0 stars 0 forks source link

html-webpack-plugin 插件学习 #4

Open Christian-freedom opened 7 years ago

Christian-freedom commented 7 years ago

html-webpack-plugin

https://github.com/jantimon/html-webpack-plugin

概述

Simplifies creation of HTML files to serve your webpack bundles
简化HTML文件的创建,为您的Webpack打包提供服务

This is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles.
这是一个Webpack插件,可以简化HTML文件的创建,以便为您的Webpack打包提供服务。
This is especially useful for webpack bundles that include a hash in the filename which changes every compilation.
这对于那种打包的最终的文件名字上有hash值的,并且这个hash值每次编译时候都改变的尤其有用。

【这句话的意思是,你每次打包的编译的时候,可能都会生成一个js文件,比如yang.js,这个js文件可能有[hash]值,比如yang1111.js,可能下一次打包的时候,它生成的文件名字叫做yang2222.js那么如果你每一次都是手动的去把这个生成的js文件使用script放置到index.html中,非常的麻烦,那么好,这个插件就能替你完成这个功能。】
You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader.
您可以让插件为您生成一个HTML文件,你可以提供自己的模板使用lodash模板或使用自己的loader。
【(什么是使用lodash模板,还有什么是使用自己的loader ?)】
这个问题的答案:
https://doc.webpack-china.org/plugins/html-webpack-plugin/
这个文档页面的开头有lodash模板loader的链接。

Maintainer: Jan Nicklas @jantimon

Third party addons 第三方插件:

The html-webpack-plugin provides hooks to extend it to your needs. There are already some really powerful plugins which can be integrated with zero configuration:
html-webpack-plugin提供了扩展到您需求的钩子。 已经有一些真正强大的插件可以与零配置集成(就是说你不用配置也能使用):
插件列表如下:
webpack-subresource-integrity for enhanced asset security
webpack-subresource-integrity,用于增强资产安全性
appcache-webpack-plugin for iOS and Android offline usage
用于iOS和Android离线使用的appcache-webpack-plugin
favicons-webpack-plugin which generates favicons and icons for iOS, Android and desktop browsers
favicons-webpack-plugin,为iOS,Android和桌面浏览器生成图标
html-webpack-harddisk-plugin can be used to always write to disk the html file, useful when webpack-dev-server / HMR are being used
html-webpack-harddisk-plugin可用于始终向磁盘写入html文件,当使用webpack-dev-server模式 / HMR 模式时很有用
html-webpack-inline-source-plugin to inline your assets in the resulting HTML file
html-webpack-inline-source-plugin在生成的HTML文件中内联资产
html-webpack-exclude-assets-plugin for excluding assets using regular expressions
html-webpack-exclude-assets-plugin 用来使用正则表达式排除资产
html-webpack-include-assets-plugin for including lists of js or css file paths (such as those copied by the copy-webpack-plugin).
html-webpack-include-assets-plugin,用于包含js或css文件路径列表(例如由copy-webpack-plugin复制的文件)。
script-ext-html-webpack-plugin to add async, defer or module attributes to your Githubissues.

  • Githubissues is a development platform for aggregating issues.