HTML webpackプラグインの使用に関する簡単な分析

html-webpack-pluginプラグインを使用してページを開始すると、htmlページをメモリに配置してページの読み込み速度を上げ、 index.htmlページで導入されたJSファイルのパスを自動的に設定できます。

前提条件: プロジェクトに Webpack がインストールされている。手順:

ステップ 1.プロジェクトのルート ディレクトリでcnpm i html-webpack-plugin -Dと入力して、html-webpack-plugin プラグインを開発依存関係にインストールします。その機能は、指定されたテンプレート ページに従って、メモリ内に対応する HTML ページを生成することです。

ステップ2 : プラグインをインストールした後、 webpack.config.jsの設定ファイルを変更する

構成ファイルに html-webpack-plugin プラグインをインポートし、テンプレート ページ パスと生成されるページ名を構成します。

const パス = require("パス")
// html-webpack-plugin をインポートする
const htmlWebpackPlugin = require("html-webpack-plugin")

モジュール.エクスポート={
    エントリ:path.join(__dirname,"./src/main.js"),
    出力：{
        パス:path.join(__dirname,"./dist"),
        ファイル名:"bundle.js"
    },
    //プラグインノードを構成する plugins:[
        // html-webpack-plugin プラグインを作成します。 new htmlWebpackPlugin({ // パラメータを設定します。 template:path.join(__dirname,"./src/index.html"), // 指定されたページに従ってメモリ内にページを生成するためのテンプレート ページを指定します。 filename:"index.html" // メモリ内に生成されるページの名前を指定します。 })
    ]
}

html-webpack-plugin プラグインを使用した後は、メモリ内に生成された HTML ページに bundle.jsの正しいパスが自動的に導入されるため、bundle.js の参照パスを手動で処理する必要はありません。

概要 - プラグインの機能:

1. 指定されたページに基づいてメモリ内にページを自動的に生成する

2. パッケージ化されたbundle.jsをページに自動的に導入する

html webpack プラグインの使い方に関するチュートリアルはこれで終わりです。html webpack プラグインの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。