html-webpack-plugin の使用方法の詳細な説明

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

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

HTML エントリ ファイルを生成および作成できます。たとえば、1 つのページで HTML ファイル エントリを生成できます。N 個のhtml-webpack-pluginを構成すると、N 個のページ エントリを生成できます。

1. インストール

cnpm と webpack-plugin -D

2. webpack.config.json での参照

定数パス = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin') //最初のステップmodule.exports = {
    エントリ: path.join(__dirname, './src/main.js'),
    出力: {
        パス: path.join(__dirname, './dist'),
        ファイル名: 'bundle.js',
    },
    モード: '開発'、
    開発サーバー: {
        オープン: 真、
        ポート: 8080、
        ホット：本当、
        コンテンツベース: 'src'
    },
    プラグイン: [
        new htmlWebpackPlugin({ //ステップ 2 template: path.join(__dirname, './src/index.html'), //生成されたテンプレートのパスを指定します filename: 'index.html' //生成されたページの名前を指定します })
    ]
}

3. html-webpack-pluginの役割

1. 指定されたテンプレートのファイルをメモリ内に生成し、アクセスを高速化します。 2. 指定されたテンプレートファイルにbundle.jsファイルを自動的に追加します。

要約する

html-webpack-plugin の詳しい使い方については、これで終了です。html-webpack-plugin の使い方について、さらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。