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 path=require("path")
// import html-webpack-plugin
const htmlWebpackPlugin=require("html-webpack-plugin")

module.exports={
    entry:path.join(__dirname,". /src/main.js"),
    output:{
        path:path.join(__dirname,". /dist"),
        filename:"bundle.js"
    },
    // Configure the plugin node
    plugins:[
        // Create html-webpack-plugin plugin
        new htmlWebpackPlugin({ // set parameters
            template:path.join(__dirname,". /src/index.html"), // specify template page to generate in-memory page based on the specified page
            filename:"index.html" // Specify the name of the generated in-memory page
        })
    ]
}

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

<スパン 要約すると - プラグインが何をするか。

1. 指定したページを元にインメモリページを自動生成する

2. パッケージ化されたbundle.jsを自動的にページ内に取り込む

これはhtml webpackプラグインチュートリアルの使用に関するこの記事の終わりです、より関連するhtml webpackプラグインの内容は、スクリプトハウスの過去の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来的にもっとスクリプトハウスをサポートして願っています！.