コンパイラかく語りき

import { Fun } from 'programming'

非公式Webpackチュートリアル その5

ひきつづきWebpackのチュートリアルを進めていきます。

 

 前回までで、ローダーを使ったバンドルの方法を勉強しました。

chuckwebtips.hatenablog.com

 

今回は、さらにプラグインを追加していきます。

github.com

 

さらなるプラグインの追加

今回はもう1つ、新たなプラグインを追加します。

今回は追加するのは、htmlプラグインです。これは、新たなHTMLを生成したり、既存のHTMLを利用するプラグインです。

 

インストール

インストールはいつものように、npmから。

$ npm install --save-dev html-webpack-plugin@2

 

config

コンフィグに追記します。

gistd79b72970382928b02d5

 

htmlの用意

 HTMLファイルを用意します。

gistde171ceaf615c3001011

 

この状態でwebpackコマンドを走らせると以下のHTMLファイルが自動生成されます。

gisted3ea2d3ee4ffb022790

 

バンドル後のJSファイルを読み込むscriptタグが自動生成されていますね。

 

追記

ただし、チュートリアルによるとHTMLの生成はなるべく控えたほうがいいとのこと。せいぜいシンプルなSPAくらいならOKだとか。

 

まとめ

HTMLをWebpackで扱う方法について学んできました。

ただし、非推奨とのことで、あくまでこんな手法もあるんだなー程度にとどめておきます。

 

いつもどおり、書いたコードはこちら。

github.com