ひきつづきWebpackのチュートリアルを進めていきます。
前回までで、ローダーを使ったバンドルの方法を勉強しました。
今回は、さらにプラグインを追加していきます。
さらなるプラグインの追加
今回はもう1つ、新たなプラグインを追加します。
今回は追加するのは、htmlプラグインです。これは、新たなHTMLを生成したり、既存のHTMLを利用するプラグインです。
インストール
インストールはいつものように、npmから。
$ npm install --save-dev html-webpack-plugin@2
config
コンフィグに追記します。
htmlの用意
HTMLファイルを用意します。
この状態でwebpackコマンドを走らせると以下のHTMLファイルが自動生成されます。
バンドル後のJSファイルを読み込むscriptタグが自動生成されていますね。
追記
ただし、チュートリアルによるとHTMLの生成はなるべく控えたほうがいいとのこと。せいぜいシンプルなSPAくらいならOKだとか。
まとめ
HTMLをWebpackで扱う方法について学んできました。
ただし、非推奨とのことで、あくまでこんな手法もあるんだなー程度にとどめておきます。
いつもどおり、書いたコードはこちら。