HTML-WEBPACK-PLUGINプラグインを使用してページを起動してHTMLページをメモリに配置して、ページの読み込み速度を改善します
また、 index.htmlページにJSファイルによって導入されたパスを自動的に設定することもできます
使用の前提条件:Webpackがプロジェクトにインストールされています。
ステップ1 :cnpm i html-webpack-plugin -Dを入力その機能は、指定されたテンプレートページに基づいて、メモリ内で対応するHTMLページを生成することです。
ステップ2 :プラグインがインストールされた後、 webpack.config.jsの構成ファイルを変更する構成ファイルにHTML-WEBPACK-PLUGINプラグインをインポートし、テンプレートページパスと生成されたページ名を構成します
const path = require(path)// html-webpack-pluginconst htmlwebpackplugin = require(html-webpack-plugin)module.exports = {entry:path.join(__ dirname、。/src/main.js)、出力:{path.join(dist) filename:bundle.js}、//プラグインの構成:[// html-webpack-pluginプラグインの作成new htmlwebpackplugin({// pather.join(__ dirname、。/src/index.html)、//テンプレートページを指定するページを指定するテンプレートページを指定するページを作成するテンプレートページを指定//メモリ内の生成されたページの名前を指定})]}HTML-Webpack-Pluginプラグインを使用した後、bundle.jsの参照パスを手動で処理する必要はありません
bundle.jsへの正しいパスがメモリ内の生成されたHTMLページに自動的に導入されたため
要約 - プラグインがすること:1.指定されたページに基づいてメモリ内のページを自動的に生成します。
2。パッケージ化されたbundle.jsをページに自動的に導入します
これは、HTML WebPackプラグインの使用に関するチュートリアルの簡単な分析に関するこの記事の終わりです。より関連するHTML WebPackプラグインのコンテンツについては、wulin.comから以前の記事を検索するか、以下の関連記事を閲覧し続けてください。将来、誰もがwulin.comをサポートすることを願っています!