webpackでHTML・画像をそのまま出力 【jQueryを組み込む方法も紹介】
「webpackでBabelを使ってES6を使えるようにする 【Sass設定もあり】」の記事で紹介したwebpackの基本構成に続いて、続きの記事になります。
前回の内容にプラスして、HTMLや画像をまとめずにそのまま出力する方法、jQueryを含めて使えるようにする方法を紹介します。
この記事を書いている僕は、フロントエンドのプログラマー(フリーランス)として、これまで３年以上のWeb制作経験があり、Vue,React,NuxtなどフロントエンドのSPA開発を得意としていて、webpackやfuseboxなどビルド設定を業務でこなすこともあり、経験値があります。
この記事を読むことにより、webpackでのHTML・画像の取り扱い、jQuery取り込みの方法がわかるようになります。
GitHubのサンプルコード
サンプルコードとして、GitHubに完成したコードを上げています。
https://github.com/it-web-life/webpack_settings_html_images_jquery
※「git clone」するか、緑色の「Code」ボタンをクリックして「Download ZIP」をクリックしてダウンロードして中身を解凍してください。
HTMLの取り込みと出力をできるようにする
HTMLファイルをまとめずにそのまま、HTMLファイルとして出力するには「html-webpack-plugin」を使います。htmlのローダーは含まれているので別でインストールする必要ないですが、指定したい場合は別のローダーを使うことも可能です。
「html-webpack-plugin」をインストールして、設定ファルに設定を追加します。
$ yarn add -D html-webpack-plugin
▼webpack.common.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
【中略】
plugins: [
【中略】
new HtmlWebpackPlugin({
template: "./index.html"
})
]※「html-webpack-plugin」をrequireして読み込み、pluginsの設定に追加します。
「template」に読み込むファイルを記載します。
公式にもありますが、複数のHTMLファイルを生成するには、プラグイン配列でプラグインを複数回宣言します。
画像をまとめず、そのまま出力させる
画像はwebpackにまとめられるとbase64で取り込んで生成され、ファイルが重くなる場合がある欠点があります。
そのまま画像を出力したい場合は「copy-webpack-plugin」を使って制御が可能です。
「copy-webpack-plugin」をインストールして、設定ファルに設定を追加します。
$ yarn add -D copy-webpack-plugin
▼webpack.common.js
const CopyPlugin = require('copy-webpack-plugin');
【中略】
plugins: [
// 画像ファイル出力
new CopyPlugin({
patterns: [
{ from: 'src/images', to: 'images' },
],
}),
]※「copy-webpack-plugin」をrequireして読み込み、pluginsの設定に追加します。
「patterns」で「from」が読み込む元の画像ディレクトリパス、「to」がそれを出力するディレクトリ名の指定です。
jQueryをインストールする
jQueryをビルドに含めたい場合があると思います。その場合は、jQueryパッケージをインストールして設定に記載します。
$ yarn add jquery
▼webpack.common.js
plugins: [
【中略】
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]※pluginsにjQueryを追記します。
まとめ
完成したソースコード
https://github.com/it-web-life/webpack_settings_html_images_jquery
サンプルの動作を確認できるサイト
https://it-web-life.github.io/webpack_settings_html_images_jquery/
今回のwebpack設定では、インストールと設定をしたら、「yarn dev」でwebpack-dev-serverが立ち上がり、http://localhost:8081/ にてビルドされた状態を確認できます。
「yarn build」や「yarn build:dev」で出力ファイルを見ると、HTMLファイルの「index.html」や画像の「images」ディレクトリ内に画像がそのまま出力されることが確認できると思います。
今回の構成で例えばデバッグ用にHTMLや画像を出力させたい場合に、「webpack.dev.js」のみに設定を書けば、開発環境でのみhtmlや画像が出力されるようすることも可能です。
webpackはいろいろなパッケージがあるので、状況に合わせて検索してみて導入するとよりよい環境構築が可能になると思います。
今回はwebpackの設定にて、「html-webpack-plugin」「copy-webpack-plugin」、及びjQueryの追加について、解説しました。
ご参考になれば幸いです。
※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています