阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      HtmlWebpackPlugin

      说明

      插件的基本作用就是生成 html 文件。原理很简单:

      将 webpack 中entry配置的相关入口 chunk 和 extract-text-webpack-plugin抽取的 css 样式

      插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个 html 文件,

      具体插入方式是将样式link插入到head元素中,script插入到head或者body中。

      实例化该插件时可以不配置任何参数,例如下面这样:

      var HtmlWebpackPlugin = require('html-webpack-plugin')
      
      webpackconfig = {
          ...
          plugins: [
              new HtmlWebpackPlugin()
          ]
      }
      

      HtmlWebpackPlugin

      HtmlWebpackPlugin 简化了 HTML 文件的创建,

      以便为你的 webpack 包提供服务。

      这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个 HTML 文件,使用 lodash 模板提供你自己的模板,或使用你自己的 loader。

      安装

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

      基本用法

      该插件将为你生成一个 HTML5 文件, 其中包括使用 script 标签的 body 中的所有 webpack 包。 只需添加插件到你的 webpack 配置如下:

      var HtmlWebpackPlugin = require('html-webpack-plugin');
      var path = require('path');
      
      module.exports = {
        entry: 'index.js',
        output: {
          path: path.resolve(__dirname, './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 标签内。

      如果你有任何 CSS assets 在 webpack 的输出中(例如, 利用 MiniCssExtractPlugin 提取 CSS), 那么这些将被包含在 HTML head 中的标签内。

      配置

      获取所有的配置选项。

      属性名字段类型默认值说明
      titleStringWebpack App网页 document.title 的配置
      filenameStringindex.htmlhtml 文件生成的名称,可以使用 assets/index.html 来指定生成的文件目录和文件名, 重点1:生成文件的跟路径为ouput.path的目录。 重点2: ‘assets/index.html’ 和 ./assets/index.html 这两种方式的效果时一样的, 都是在 output.path 目录下生成 assets/index.html
      templateString生成 filename 文件的模版, 如果存在 src/index.ejs, 那么默认将会使用这个文件作为模版。 重点:与 filename 的路径不同, 当匹配模版路径的时候将会从项目的跟路径开始
      templateParametersBoolean|Object|Function覆盖默认的模版中使用的参数
      injectBoolean|Stringtrue制定 webpack 打包的 js css 静态资源插入到 html 的位置, 为 true 或者 body 时, 将会把 js 文件放到 body 的底部, 为 head 时, 将 js 脚本放到 head 元素中。
      faviconString为生成的 html 配置一个 favicon
      meteObject{}为生成的 html 文件注入一些 mete 信息, 例如: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}
      baseObject|String|falsefalse在生成文件中注入 base 标签, 例如 base: "https://example.com/path/page.html <base> 标签为页面上所有的链接规定默认地址或默认目标
      minifyBoolean|Object如果 mode 设置为 production 默认为 true 否则设置为 false设置静态资源的压缩情况
      hashBooleanfalse如果为真,则向所有包含的 jsCSS 文件附加一个惟一的 webpack 编译散列。这对于更新每次的缓存文件名称非常有用
      cacheBooleantrue设置 js css 文件的缓存,当文件没有发生变化时, 是否设置使用缓存
      showErrorsBooleantrue当文件发生错误时, 是否将错误显示在页面
      xhtmlBooleanfalse当设置为 true 的时候,将会讲 <link> 标签设置为符合 xhtml 规范的自闭合形式

      第三方插件

      这个插件支持第三方插件。详细列表参阅文档。

      更多 HTML 搜索

      通过查看前端开发者在搜索引擎里的搜了哪些 HTML 内容,可以知道他们实际工作使用了什么技术或者什么地方薄弱;

      你可以通过点击 HTML 常见搜索 来查看前端开发者都在搜哪些内容;

      注:这里仅收录了常见搜索,并不是无论搜索什么都记录在里面的;

      如果你是为了面试做准备的,那么推荐你查看 HTML面试题,这里基本包涵了市场上的所有 HTML 方面的面试题,让你更加牢固的掌握 HTML 知识

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录