httml-webpack-pluginの使い方を説明します.

この記事は個人ブログとSegmentFaultコミュニティの個人欄だけで発表します.転載は出典の個人ブログを明記してください.https://zengxiaotao.github.io SegmentFault個人欄:https://segmentfault.com/blog...
html-webpack-pluginで使用したことがあるかもしれないwebpackの子供靴は全部このpluginを使ったことがあります.使ったことがなくても聞いたことがあります.私たちは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

あなたのbuildフォルダでindex.ファイルとbundle.jsファイルが生成されます.index.ファイルでwebpackが作成したbundle.jsファイルを自動的に参照します.
これらはすべてhtml-webpack-pluginの功績です.これは自動的にファイルを作成してくれます.css、jsなどのクラスメイトファイルを参照してください.
自分は6月に初めてフロントエンドの自動化構築に接触しました.webpackとreactを勉強する時、簡単にこのプラグインを使ったことがありますが、よくあるオプションを使っただけです.今日は公式文書に沿って歩いてみます.使い方を全部見てください.
title
名前の通り、生成したhtmlファイルのタイトルを設定します.
filename
何も言いません.ファイルのファイル名を生成します.デフォルトはindex.
template
自分の指定したテンプレートファイルから特定のhtmlファイルを生成します.ここのテンプレートのタイプは、任意のあなたの好きなテンプレートであってもいいです.jade、ejs、hbs、などがありますが、カスタムテンプレートファイルを使う場合は、事前に対応するloaderをインストールしておく必要があります.でないと、webpackは正確に解析できません.jadeを例にとる

npm install jade-loader --save-dev

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

最終的にはbuildフォルダ内でyourfile.とbundle.jsファイルが生成されます.今からもう一度振り返ってみます.前のタイツの属性を見てみます.
templateオプションを指定して、titleオプションを指定したら、webpackはどれを選択しますか?実際には、この時に指定されたテンプレートファイルのtitleを選択します.テンプレートファイルにtitleが設定されていなくても.
では、filenameは上書きされますか?いいえ、指定されたfilenameをファイル名にします.
inject
注入オプション.4つのオプション値true、body、head、falseがあります.

true

デフォルト値、scriptタグはhtmlファイルのbodyの下にあります.

body

とtrue

head

scriptタグはヘッドラベル内にある

false

は、生成したjsファイルを挿入しないで、単なるhtmlファイルを生成するだけです.

favicon
生成したhtmlファイルにfaviconを生成します.属性値はfaviconファイルがあるパス名です.

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

生成されたhtmlタグには、このようなlinkタグが含まれています.

titleやfilenameと同様に、テンプレートファイルにfaviconを指定すると、この属性は無視されます.
minify
minifyの役割はhtmlファイルを圧縮することであり、minifyの属性値は圧縮オプションまたはfalseである.デフォルトの値はfalseで、生成したhtmlファイルを圧縮しません.この圧縮オプションを見てください.
httml-webpack-pluginの内部にhtml-miniferが集められています.この圧縮オプションはhtml-minifyの圧縮オプションと全く同じです.簡単な例を見てください.

// webpack.config.js
...
plugins: [
    new HtmlWebpackPlugin({
        ...
        minify: {
            removeAttributeQuotes: true //        
        }
    })
]

test minify

test minify

sh
hashオプションは、生成されたjsファイルにユニークなhash値を与える役割をしています.このhash値はwebpackでコンパイルされたhash値です.デフォルトの値はfalseです.同じ例を見ます.

// webpack.config.js
plugins: [
    new HtmlWebpackPlugin({
        ...
        hash: true
    })
]

webpackコマンドを すると、 したファイルのscriptタグ で されているjsファイルが えますが、ちょっと わっていますか?bundle.jsファイルの の のhash は webpackコンパイルで するhash です.

$ webpack
Hash: 22b9692e22e7be37b57e
Version: webpack 1.13.2

cache
デフォルトはtrueです. が した にのみ しいファイルが されることを します.
show Errrors
showErrrorsの は、webpackのコンパイルが っていたら、webpackはエラーメッセージを つのpreラベルに んで、 のデフォルト はtrueで、つまりエラーメッセージを します.
chunks
chunksオプションの は にマルチエントランスファイルです. のエントリファイルがあると、 する のコンパイルされたjsファイルが されます.chunksオプションはこれらの したjsファイルを うかどうかを します.
chunksはデフォルトでは した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']
    })
]

webpackコマンドを すると、 したindex.ファイルの にindex.jsとindex.2.jsだけが されます.

...

chunksオプションが されていない は、デフォルトはすべて されます.
exclude Chunks
chunksを したら、exclude Chunksオプションも かります.chunksとは に、いくつかのjsファイルを します.たとえば の では、 の に する.

...
excludeChunks: ['index1.js']

chunks SortMode
このオプションはスクリプトタグの を します.デフォルトでは4つのオプションがあります.'none','atot','dependency','function'.

'dependency'はもちろん、 なるファイルの に って べ えられます.

'aut'のデフォルト は、プラグイン のソート です. な はここではよく かりません.

'none' ?よく かりません.

{function}は を しますか?しかし、 のパラメータは ですか?よく かりません.
このオプションを ったり、 な を っている がいたら、 えてください.
xhtml
ブール のデフォルト はfalseであり、trueであれば、xファイルに するモードでファイルを します.
め りをつける
、new HtmlWebpackPlugin()に されたオプションをまとめました.すべてのオプションの を ると、プロジェクト により に することができます.
が わる