HtmlWebpackPlugin
HtmlWebpackPluginは、webpackバンドルを提供するHTMLファイルの作成を簡素化します。これは、コンパイルごとに変更されるファイル名にハッシュが含まれるwebpackバンドルに特に役立ちます。プラグインにHTMLファイルを生成させるか、lodashテンプレートを使用して独自のテンプレートを指定するか、独自のローダーを使用できます。
インストール
npm install --save-dev html-webpack-plugin基本的な使い方
プラグインは、scriptタグを使用して、すべてのwebpackバンドルをbodyに含めるHTML5ファイルを生成します。次のように、プラグインをwebpack構成に追加します。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const 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>タグですべて含まれます。
webpackの出力にCSSアセットがある場合（たとえば、MiniCssExtractPluginで抽出されたCSS）、これらは生成されたHTMLの<head>要素に<link>タグで含まれます。
構成
すべての構成オプションについては、プラグインのドキュメントを参照してください。
サードパーティのアドオン
プラグインはアドオンをサポートしています。リストについては、ドキュメントを参照してください。
4 貢献者
