html-webpack-plugin の詳細な紹介-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

html-webpack-plugin の詳細な紹介

黄舟

May 26, 2017 pm 04:02 PM

はじめに

最近、React プロジェクトで初めて html-webapck-plugin プラグインを使用しました。これには 2 つの主な機能があります:

HTML ファイルに導入されたスクリプトやリンクなどの外部リソースを動的に追加します。キャッシュされた外部ファイルを参照する問題を防ぐために、コンパイル.ハッシュを使用します

たとえば、1 つのページで HTML ファイルエントリを生成できます

。

このプラグインを使用すると、プロジェクト内で上記のような問題が発生した場合、それらを簡単に解決できます。

私はプロジェクトで html-webpack-plugin を使用していますが、このプラグインに慣れていないため、開発プロセス中にいくつかの問題が発生しました。

html-webpack-plugin

プラグインの基本的な機能は、HTML ファイルを生成することです。原理は非常に簡単です:

webpack の `entry` 設定の関連エントリサンクと、`extract-text-webpack-plugin` によって抽出された CSS スタイルを、`template` または `templateContent` によって指定されたコンテンツベースに挿入します。プラグインが提供する設定項目 htmlファイルを生成します。具体的な挿入方法は、`head`要素に`link`を、`head`または`body`に`script`を挿入します。

次のようなパラメータを設定せずにプラグインをインスタンス化できます:

var HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;)
    
webpackconfig = {
    ...    plugins: [        new HtmlWebpackPlugin()
    ]}

オプションを設定せずに html-webpack-plugin プラグインは、すべてのエントリサンクとエントリ内の extract-text- を設定します。デフォルトでは、webpack-plugin によって抽出された CSS スタイルは、ファイル内で指定された場所に挿入されます。たとえば、上記で生成された HTML ファイルの内容は次のとおりです。

<!DOCTYPE html><html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  <link href="index-af150e90583a89775c77.css" rel="stylesheet"></head>
  <body>
  <script type="text/javascript" src="common-26a14e7d42a7c7bbc4c2.js"></script>
  <script type="text/javascript" src="index-af150e90583a89775c77.js"></script></body></html>

もちろん、特定の設定項目を使用して、特別なニーズをカスタマイズすることもできます。では、プラグインの設定項目は何でしょうか。

html-webpack-plugin 設定項目

プラグインには多くの設定項目が用意されており、次のソースコードから確認できます。

this.options = _.extend({
    template: path.join(__dirname, &#39;default_index.ejs&#39;),
    filename: &#39;index.html&#39;,
    hash: false,
    inject: true,
    compile: true,
    favicon: false,
    minify: false,
    cache: true,
    showErrors: true,
    chunks: &#39;all&#39;,
    excludeChunks: [],
    title: &#39;Webpack App&#39;,
    xhtml: false
  }, options);

title: 生成された HTML ドキュメントのタイトル。この項目を設定すると、次の ejs テンプレート構文形式のように、HTML テンプレートファイルでテンプレートエンジン構文が使用されて構成項目の値が取得されない限り、指定されたテンプレートファイルのタイトル要素のコンテンツは置き換えられません:

<title>{%= o.htmlWebpackPlugin.options.title %}</title>

filename : 出力ファイルファイル名はデフォルトでindex.htmlになります。設定されていない場合は、出力ファイルのディレクトリの場所を指定することもできます(「html/index.html」など)。ファイル名に関する追加の 2 つのポイント:

1. ファイル名の設定 html ファイルディレクトリは、現在のプロジェクトディレクトリ構造ではなく、webpackConfig.output.path パスを基準としています。

2. 生成されるHTMLファイルのコンテンツ内のリンクおよびスクリプトのパスは、生成されるディレクトリからの相対パスであることを指定します。パスを記述するときは、生成されるディレクトリへの相対パスを記述してください。

テンプレート: ローカルテンプレートファイルの場所。handlebars!src/index.hbs などのローダー (ハンドルバー、ejs、undersore、html など) をサポートします。

テンプレートに関する追加のポイント:

1. テンプレートの設定項目 htmlファイル内でファイルローダを使用する場合、指定した場所が見つからず、生成されるhtmlファイルの内容が期待した内容とならない場合があります。

2. templateに指定したテンプレートファイルにローダーが指定されていない場合は、デフォルトでejs-loaderが使用されます。たとえば、template: './index.html'、.html にローダーが指定されていない場合は、テンプレートのコンテンツを指定できる ejs-loader

templateContent: string|function を使用しますが、テンプレートと共存することはできません。構成値が function の場合、HTML 文字列を直接返すことも、非同期で呼び出して HTML 文字列を返すこともできます。

inject: すべての静的リソースをテンプレートまたは templateContent に注入します。異なる設定値が異なる場所に注入されます。

1. true または body: すべての JavaScript リソースが body 要素の下部に挿入されます

2. head: すべての JavaScript リソースが head 要素に挿入されます

3. false: すべての静的リソースの CSS と JavaScript は挿入されませんテンプレートファイル

favicon: 出力 HTML ドキュメントに特定のファビコンパスを追加します。この構成項目はタイトルと同じであり、そのパス値はテンプレート内で動的に取得する必要があります。

hash: true|false。注入されたすべての静的リソースに Webpack を追加し、コンパイルされるたびに固有のハッシュ値を生成するには、次のようなハッシュフォームを追加します:

html

chunks：允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；

excludeChunks: 这个与chunks配置项正好相反，用来配置不允许注入的thunk。

chunksSortMode: none | auto| function，默认auto；允许指定的thunk在插入到html文档前进行排序。
>function值可以指定具体排序规则；auto基于thunk的id进行排序； none就是不排序

xhtml: true|fasle, 默认false；是否渲染link为自闭合的标签，true则为自闭合标签

cache: true|fasle, 默认true；如果为true表示在对应的thunk文件修改后就会emit文件

showErrors: true|false，默认true；是否将错误信息输出到html页面中。这个很有用，在生成html文件的过程中有错误信息，输出到页面就能看到错误相关信息便于调试。

minify: {....}|false；传递 html-minifier 选项给 minify 输出，false就是不使用html压缩。

下面的是一个用于配置这些属性的一个例子：

 new HtmlWebpackPlugin({
          title:&#39;rd平台&#39;,
          template: &#39;entries/index.html&#39;, // 源模板文件
          filename: &#39;./index.html&#39;, // 输出文件【注意：这里的根路径是module.exports.output.path】
          showErrors: true,
          inject: &#39;body&#39;,
          chunks: ["common",&#39;index&#39;]      })

配置多个html页面

html-webpack-plugin的一个实例生成一个html文件，如果单页应用中需要多个页面入口，或者多页应用时配置多个html时，那么就需要实例化该插件多次；

即有几个页面就需要在webpack的plugins数组中配置几个该插件实例：

  ...
    plugins: [        new HtmlWebpackPlugin({
             template: &#39;src/html/index.html&#39;,
              excludeChunks: [&#39;list&#39;, &#39;detail&#39;]        }),
        new HtmlWebpackPlugin({
            filename: &#39;list.html&#39;,
            template: &#39;src/html/list.html&#39;,
            thunks: [&#39;common&#39;, &#39;list&#39;]        }), 
        new HtmlWebpackPlugin({
          filename: &#39;detail.html&#39;,
          template: &#39;src/html/detail.html&#39;,
           thunks: [&#39;common&#39;, &#39;detail&#39;]        })
    ]
    ...

如上例应用中配置了三个入口页面：index.html、list.html、detail.html；并且每个页面注入的thunk不尽相同；类似如果多页面应用，就需要为每个页面配置一个；

配置自定义的模板

不带参数的html-webpack-plugin默认生成的html文件只是将thunk和css样式插入到文档中，可能不能满足我们的需求；

另外，如上面所述，三个页面指定了三个不同html模板文件；在项目中，可能所有页面的模板文件可以共用一个，因为html-webpack-plugin插件支持不同的模板loader，所以结合模板引擎来共用一个模板文件有了可能。

所以，配置自定义模板就派上用场了。具体的做法，借助于模板引擎来实现，例如插件没有配置loader时默认支持的ejs模板引擎，下面就以ejs模板引擎为例来说明；

例如项目中有2个入口html页面，它们可以共用一个模板文件，利用ejs模板的语法来动态插入各自页面的thunk和css样式，代码可以这样：

<!DOCTYPE html><html style="font-size:20px"><head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <% for (var css in htmlWebpackPlugin.files.css) { %>
    <link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
    <% } %></head><body><div id="app"></div>
    <% for (var chunk in htmlWebpackPlugin.files.chunks) { %><script type="text/javascript" src=\&#39;#\&#39;" /script><% } %></body></html>

你可能会对代码中的上下文htmlWebpackPlugin数据感到迷惑，这是啥东东？其实这是html-webpack-plugin插件在生成html文件过程中产生的数据，这些数据对html模板文件是可用的。

自定义模板上下文数据

html-webpack-plugin在生成html文件的过程中，插件会根据配置生成一个对当前模板可用的特定数据，模板语法可以根据这些数据来动态生成html文件的内容。

那么，插件生成的特殊数据格式是什么，生成的哪些数据呢？从源码或者其官网都给出了答案。从源码中可以看出模板引擎具体可以访问的数据如下:

var templateParams = {
        compilation: compilation,
        webpack: compilation.getStats().toJson(),
        webpackConfig: compilation.options,
        htmlWebpackPlugin: 
          files: assets,
          options: self.options
        }
      };

从中可以看出，有四个主要的对像数据。其中compilation为所有webpack插件提供的都可以访问的一个编译对象，此处就不太做介绍，具体可以自己查资料。下面就对剩下的三个对象数据进行说明。

webpack

webpack的stats对象；注意一点：

这个可以访问的stats对象是htm文件生成时所对应的stats对象，而不是webpack运行完成后所对应的整个stats对象。

webpackConfig

webpack的配置项；通过这个属性可以获取webpack的相关配置项，如通过webpackConfig.output.publicPath来获取publicPath配置。当然还可以获取其他配置内容。

htmlWebpackPlugin

html-webpack-plugin插件对应的数据。它包括两部分：

htmlWebpackPlugin.files: 此次html-webpack-plugin插件配置的chunk和抽取的css样式。该files值其实是webpack的stats对象的assetsByChunkName属性代表的值，该值是插件配置的chunk块对应的按照webpackConfig.output.filename映射的值。例如对应上面配置插件各个属性配置项例子中生成的数据格式如下：

"htmlWebpackPlugin": {
  "files": {
    "css": [ "inex.css" ],
    "js": [ "common.js", "index.js"],
    "chunks": {
      "common": {
        "entry": "common.js",
        "css": [ "index.css" ]      },
      "index": {
        "entry": "index.js",
        "css": ["index.css"]      }
    }
  }}

这样，就可以是用如下模板引擎来动态输出script脚本

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %><script type="text/javascript" src=\&#39;#\&#39;" /script><% } %>

htmlWebpackPlugin.options: 传递给插件的配置项，具体的配置项如上面插件配置项小节所描述的。

插件事件

不知道你发现没有，html-webpack-plugin插件在插入静态资源时存在一些问题：

在插入js资源只能插入head或者body元素中，不能一些插入head中，另一些插入body中

不支持在html中文件内联*，例如在文件的某个地方用来内联外部脚本

为此，有人专门给插件作者提问了这个问题；对此插件作者提供了插件事件，允许其他插件来改变html文件内容。具体的事件如下：

Async（异步事件）:

* html-webpack-plugin-before-html-generation
    * html-webpack-plugin-before-html-processing
    * html-webpack-plugin-alter-asset-tags
    * html-webpack-plugin-after-html-processing
    * html-webpack-plugin-after-emit

Sync（同步事件）:

    * html-webpack-plugin-alter-chunks

这些事件是提供给其他插件使用的，用于改变html的内容。因此，要用这些事件需要提供一个webpack插件。例如下面定义的MyPlugin插件。

function MyPlugin(options) {
  // Configure your plugin with options...}MyPlugin.prototype.apply = function(compiler) {
  // ...
  compiler.plugin(&#39;compilation&#39;, function(compilation) {
    console.log(&#39;The compiler is starting a new compilation...&#39;);

    compilation.plugin(&#39;html-webpack-plugin-before-html-processing&#39;, function(htmlPluginData, callback) {
      htmlPluginData.html += &#39;The magic footer&#39;;
      callback(null, htmlPluginData);
    });
  });};module.exports = MyPlugin;

然后，在webpack.config.js文件中配置Myplugin信息：

plugins: [  new MyPlugin({options: &#39;&#39;})
]

以上がhtml-webpack-plugin の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Web開発にとってHTMLタグが重要なのはなぜですか？May 02, 2025 am 12:03 AM

htmltagsareSterenceforwebdevelovementasyStheStructureanhandhancewebpages.1）theydefineLayout、semantics、and-interactivity.2）semanticagsimprovecessibility.3）opeusofusofagscanoptimizeperformanceandensurecross-brows-compativeation。

HTMLタグと属性に一貫したコーディングスタイルを使用することの重要性を説明します。May 01, 2025 am 12:01 AM

コードの読みやすさ、保守性、効率を向上させるため、一貫したHTMLエンコーディングスタイルは重要です。 1）低ケースタグと属性を使用します。2）一貫したインデントを保持し、3）シングルまたはダブルの引用符を選択して固執する、4）プロジェクトのさまざまなスタイルの混合を避け、5）きれいなスタイルやEslintなどの自動化ツールを使用して、スタイルの一貫性を確保します。

ブートストラップ4にマルチプロジェクトカルーセルを実装する方法は？Apr 30, 2025 pm 03:24 PM

Bootstrap4にマルチプロジェクトカルーセルを実装するソリューションBootstrap4にマルチプロジェクトカルーセルを実装するのは簡単な作業ではありません。ブートストラップですが...

DeepSeekの公式Webサイトは、マウススクロールイベントの浸透の影響をどのように達成していますか？Apr 30, 2025 pm 03:21 PM

マウススクロールイベントの浸透の効果を実現する方法は？ Webを閲覧すると、いくつかの特別なインタラクションデザインに遭遇することがよくあります。たとえば、DeepSeekの公式ウェブサイトでは、...

HTMLビデオの再生コントロールスタイルを変更する方法Apr 30, 2025 pm 03:18 PM

HTMLビデオのデフォルトの再生コントロールスタイルは、CSSを介して直接変更することはできません。 1. JavaScriptを使用してカスタムコントロールを作成します。 2。CSSを介してこれらのコントロールを美化します。 3. video.jsやPLYRなどのライブラリを使用すると、互換性、ユーザーエクスペリエンス、パフォーマンスを検討してください。プロセスを簡素化できます。

お使いの携帯電話でネイティブセレクトを使用することにより、どのような問題が発生しますか？Apr 30, 2025 pm 03:15 PM

携帯電話でネイティブセレクトを使用する際の潜在的な問題は、モバイルアプリケーションを開発するときに、ボックスを選択する必要があることがよくあります。通常、開発者...

お使いの携帯電話でネイティブ選択を使用することの欠点は何ですか？Apr 30, 2025 pm 03:12 PM

お使いの携帯電話でネイティブ選択を使用することの欠点は何ですか？モバイルデバイスでアプリケーションを開発する場合、適切なUIコンポーネントを選択することが非常に重要です。多くの開発者...

Three.jsとOctreeを使用して部屋で3人のローミングの衝突処理を最適化する方法は？Apr 30, 2025 pm 03:09 PM

Three.JSとOctreeを使用して、部屋でのサードパーソンローミングの衝突処理を最適化します。 3つのjsでoctreeを使用して、部屋でサードパーソンローミングを実装し、衝突を追加してください...

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。