この記事では、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 つのオプションがあります
true: デフォルト値、script タグは HTML ファイルの本文の下部にあります
body: true と同じです
head: script タグは head タグ内にあります
false: 生成された js ファイルを挿入せず、HTML ファイルのみを生成します
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 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, './src/index.js'),
index1: path.resolve(__dirname, './src/index1.js'),
index2: path.resolve(__dirname, './src/index2.js')
}
...
plugins: [
new HtmlWebpackPlugin({
...
chunks: ['index','index2']
})
]... <script type=text/javascript src=index.js></script> <script type=text/javascript src=index2.js></script>
excludeChunks
チャンクを理解すると、excludeChunks オプションは理解しやすくなります。これはチャンクの逆であり、特定の js ファイルを除外します。 たとえば、上記の例は実際には次の行と同等です... excludeChunks: ['index1.js']
chunksSortMode
このオプションはスクリプトタグの参照順序を決定します。デフォルトでは、「none」、「auto」、「dependency」、「{function}」の 4 つのオプションがあります。'dependency' 言うまでもなく、異なるファイルの依存関係に従ってソートされます。
「auto」デフォルト値、プラグインの組み込みソート方法、ここでの具体的な順序がわかりません...
「none」障害？ よくわかりません...
{function} 関数を提供しますか?でも、この関数のパラメータは何でしょうか?よくわかりません...
このオプションを使用したことのある生徒、またはその具体的な意味を知っている生徒がいたら、教えてください。 。 。
xhtml
ブール値。デフォルト値は false です。 true の場合、ファイルは xhtml 互換モードで参照されます。
概要
上記は、new HtmlWebpackPlugin() に渡されるオプションをまとめたもので、すべてのオプションの意味を理解した後、プロジェクトを構築するときにそれらをより柔軟に使用できるようになります。皆さんの学習に役立つことを願っています。また、皆さんも Script Home をサポートしていただければ幸いです。
上記は私があなたのためにまとめたものです。
関連記事:
$.ajaxでサーバーからjsonデータを取得する方法について() メソッド
MUI フレームワークを使用して外部 Web ページまたはサーバー データをロードする方法
Vue 単体テストでの Karma+Mocha の詳細な説明
WeChat アプレットでの 3 レベルの連携セレクターの使用方法
以上がhtml-webpack-plugin の用途は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
