検索

ホームページ >ウェブフロントエンド >jsチュートリアル >html-webpack-plugin の用途は何ですか?

html-webpack-plugin の用途は何ですか?

亚连
亚连オリジナル
2018-06-11 11:55:041855ブラウズ

この記事では、html-webpack-plugin の使い方の詳細な説明を中心に紹介しますので、参考にしてください。

html-webpack-plugin webpack を使用したことがある方は、たとえ使用したことがなくても、このプラグインを聞いたことがあるかもしれません。 Webpack を学習していると、次のようなコードをよく目にすることがあります。 

// webpack.config.js
module.exports = {
  entry: path.resolve(__dirname, './app/index.js'),
  output:{
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js'
  }
  ...
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

ターミナルで webpack コマンドを入力すると

webpack

、魔法のように、index.html ファイルと Bundle.js ファイルがビルド フォルダーに生成され、webpack がインデックス内で自動的に参照されることがわかります。 html ファイル 生成された Bundle.js ファイル。

これらはすべて html-webpack-plugin の結果です。 HTML ファイルが自動的に生成され、関連するアセット ファイル (css、js など) が参照されます。

私が初めてフロントエンドの自動構築に触れたのは 6 月で、webpack と React を学習していたときにこのプラグインを簡単に使用しましたが、今日は公式ドキュメントに従い、いくつかの一般的なオプションを使用しました。のすべての使い方を見てみましょう。

title

その名の通り、生成されるhtmlファイルのタイトルを設定します。

filename

何も言うことはありません、生成されたhtmlファイルのファイル名です。デフォルトは、index.html です。

template

は、独自に指定したテンプレート ファイルに基づいて特定の HTML ファイルを生成します。ここでのテンプレート タイプは、html、jade、ejs、hbs など、任意のテンプレートにすることができますが、カスタム テンプレート ファイルを使用する場合は、事前に対応するローダーをインストールする必要があることに注意してください。それ以外の場合は、webpack をインストールしてください。正しく解析できなくなります。翡翠を例にとってみましょう。 

npm install jade-loader --save-dev
// webpack.config.js
...
loaders: {
  ...
  {
    test: /\.jade$/,
    loader: 'jade'
  }
}
plugins: [
  new HtmlWebpackPlugin({
    ...
    jade: 'path/to/yourfile.jade'
  })
]

最後に、yourfile.html ファイルと Bundle.js ファイルがビルド フォルダーに生成されます。ここで、前に使用した title 属性を見てみましょう。

template オプションと title オプションの両方を指定した場合、webpack はどちらを選択しますか? 実際には、テンプレート ファイルにタイトルが設定されていない場合でも、指定したテンプレート ファイルのタイトルがこの時点で選択されます。

ファイル名も上書きされますか? 実際、指定されたファイル名がファイル名として使用されます。

注入

注入オプション。 true、body、head、false の 4 つのオプションがあります

  1. tru​​e: デフォルト値、script タグは HTML ファイルの本文の下部にあります

  2. body: true と同じです

  3. head: script タグは head タグ内にあります

  4. false: 生成された js ファイルを挿入せず、HTML ファイルのみを生成します

  5. favicon: 生成された HTML ファイルのファビコンを生成します。属性値は、favicon ファイルのパス名です。 

// webpack.config.js
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    favicon: 'path/to/yourfile.ico'
  }) 
]

生成されたhtmlタグには、このようなリンクタグが含まれます

<link rel="shortcut icon" href="example.ico" rel="external nofollow" >

タイトルやファイル名と同じ、テンプレートファイルにfaviconが指定されている場合、この属性は無視されます。

minify

minify は、HTML ファイルを圧縮するために使用されます。minify の属性値は、圧縮オプションまたは false です。デフォルト値は false で、生成された HTML ファイルは圧縮されません。この圧縮オプションを見てみましょう。

html-webpack-plugin は html-minifier を内部的に統合します。この圧縮オプションは html-minify の圧縮オプションとまったく同じです。簡単な例を見てください。 

// webpack.config.js
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    minify: {
      removeAttributeQuotes: true // 移除属性的引号
    }
  })
]
<!-- 原html片段 -->
<p id="example" class="example">test minify</p>
<!-- 生成的html片段 -->
<p id=example class=example>test minify</p>

hash

hash オプションは、生成された js ファイルに一意のハッシュ値 (Webpack コンパイルのハッシュ値) を与えることです。デフォルト値は false です。例も見てみましょう。 

// webpack.config.js
plugins: [
  new HtmlWebpackPlugin({
    ...
    hash: true
  })
]
<script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>

webpack コマンドを実行すると、生成された HTML ファイルの script タグで参照されている js ファイルが少し変更されていることがわかります。

bundle.js ファイルに続くハッシュ値の文字列が、この Webpack コンパイルに対応するハッシュ値です。 

$ webpack
Hash: 22b9692e22e7be37b57e
Version: webpack 1.13.2

cache

デフォルト値は true です。コンテンツが変更された場合にのみ新しいファイルが生成されることを示します。

showErrors

showErrors の機能は、webpack のコンパイル中にエラーが発生した場合、webpack がエラー メッセージを pre タグでラップすることです。属性のデフォルト値は true で、これはエラー メッセージが表示されることを意味します。

chunks

chunks オプションは主に複数エントリのファイル用です。複数のエントリ ファイルがある場合、それに応じて複数のコンパイル済み js ファイルが生成されます。次に、チャンク オプションで、これらの生成された js ファイルを使用するかどうかを決定できます。

チャンクは、デフォルトで生成された HTML ファイル内のすべての js ファイルを参照します。もちろん、どの特定のファイルをインポートするかを指定することもできます。

小さな例を見てみましょう。 

// webpack.config.js
entry: {
  index: path.resolve(__dirname, &#39;./src/index.js&#39;),
  index1: path.resolve(__dirname, &#39;./src/index1.js&#39;),
  index2: path.resolve(__dirname, &#39;./src/index2.js&#39;)
}
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    chunks: [&#39;index&#39;,&#39;index2&#39;]
  })
]

webpackコマンドを実行すると、生成されたindex.htmlファイルでindex.jsとindex2.jsのみが参照されていることがわかります

...
<script type=text/javascript src=index.js></script>
<script type=text/javascript src=index2.js></script>

そしてchunksオプションが指定されていない場合、それらはすべてデフォルト。

excludeChunks

チャンクを理解すると、excludeChunks オプションは理解しやすくなります。これはチャンクの逆であり、特定の js ファイルを除外します。 たとえば、上記の例は実際には次の行と同等です

...
excludeChunks: [&#39;index1.js&#39;]

chunksSortMode

このオプションはスクリプトタグの参照順序を決定します。デフォルトでは、「none」、「auto」、「dependency」、「{function}」の 4 つのオプションがあります。

  1. 'dependency' 言うまでもなく、異なるファイルの依存関係に従ってソートされます。

  2. 「auto」デフォルト値、プラグインの組み込みソート方法、ここでの具体的な順序がわかりません...

  3. 「none」障害？ よくわかりません...

  4. {function} 関数を提供しますか?でも、この関数のパラメータは何でしょうか?よくわかりません...

このオプションを使用したことのある生徒、またはその具体的な意味を知っている生徒がいたら、教えてください。 。 。

xhtml

ブール値。デフォルト値は false です。 true の場合、ファイルは xhtml 互換モードで参照されます。

概要

上記は、new HtmlWebpackPlugin() に渡されるオプションをまとめたもので、すべてのオプションの意味を理解した後、プロジェクトを構築するときにそれらをより柔軟に使用できるようになります。皆さんの学習に役立つことを願っています。また、皆さんも Script Home をサポートしていただければ幸いです。

上記は私があなたのためにまとめたものです。

関連記事:

WeChatアプレットのボタンコンポーネントの使用手順

WeChatアプレットの進捗コンポーネントの使用方法

$.ajaxでサーバーからjsonデータを取得する方法について() メソッド

MUI フレームワークを使用して外部 Web ページまたはサーバー データをロードする方法

Vue 単体テストでの Karma+Mocha の詳細な説明

PHP クロージャーと匿名関数 (詳細なチュートリアル)

WeChat アプレットでの 3 レベルの連携セレクターの使用方法

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

json css ajax html webpack xhtml auto 闭包 JS function 选择器 微信小程序 自动化
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Webpack が複数のページを構成する方法について次の記事：Webpack が複数のページを構成する方法について

関連記事

続きを見る