webpack3でjQueryとBootstrapをくっつける

この内容はwebpack3とjQuery3とBootstrap4(Beta)をもとに記述しています。

最近はCSSとかHTMLその他諸々とかを一つのJavaScriptにくっつけてしまおうみたいな、まさにコンパイルといえるようなのが流行ってるみたいですね。そこでよく使われるのがwebpack。

ただね上のはSingle Page Applicationがやっぱり中心で、この進みの早いフロントエンドの技術の中でほんの数年前まで一般的やったのに、今はすでにオールドスタイルって呼べるようなjQueryとBootstrap使って、各ページからそれぞれ別にインクルードしてって形のやつはSoRの世界にはまだまだあるのです。

まぁ、頑張ってBowerでとってきて、gulpでくっつけてやってるってところくらいまでかと。で、「いまなんかwebpackってのが流行ってるらしいぞ。Bowerってもう消えたらしい。gulp? うーん。」みたない情報をもとに、「じゃぁ、jQueryとBootstrapとかくっつけてるのをwebpackにしてみるか!」って考えるわけです。

っていうことで、作りました。jQueryとBootstrapくっつけるってのがピンポイントで見つからなかったのでさらしときます。

webpackでくっつける

以下、webpack.config.jsonとpackage.jsonですが、さきにポイントだけ。

  • jsとcssをくっつけるのを別々に定義してます
  • Bootstrap4からTooltipはPopper.jsを使うようになったらしいので一緒にくっつけてます
  • Bootstrap4からアイコン無くなったみたいなのでFontAwesome使ってます
  • jQueryはexpose-loaderでグローバルから見えるようにしてます
  • Bootstrapのcssはscssからコンパイルしてます
    • 今後アプリケーションでメインの色変えたいとかをBootstrapのvariable.scssの変数を上書き(というか先行定義)して対応できるように
  • fontファイルはfile-loaderでファイルとして保存してます(指定しないとくっつけようとされて出力先に出力されない)
  • jQueryとBootstrapとPopper.jsとFontAwesomeはnpmからとってます。