🍜
Webpack5を使用したWeb制作向けテンプレート
2022年10月、我々Web制作者が大変お世話になってきたSCSSの@import構文がサポートを終了しました。
これから始めるプロジェクトは原則、@useや@forwardを使わなければなりません。
「あー、useとforward対応しなきゃなあ。ついでにGulpもやめて最近よく聞くWebpackに手を出してみようかなー」
…というそこのあなたのために、Webpackを使った超ミニマルなWeb制作テンプレートを作ったので共有します。
概要
今回共有するリポジトリは、僕が案件で使うときにおおよそ共通する要素をテンプレートとして使い回せるようにしたものです。
メディアクエリの変数とか非常に少ないですが、「まあこれからコンテナクエリの時代だし（？）」 ということで多めに見ていただいて、自由にカスタムしてみてください。
特徴
特徴（というか設定項目）はざっと以下の通り。（ほぼreadme）
設定ファイルは共通、開発、本番の3つに分けています。
共通設定
- 出力先はdistディレクトリ
- 出力ファイル名はbundle.js
- エントリポイントはindex.js
- ビルドキャッシュを有効化
- css ファイルを別で書き出し
- Sass(SCSS/SASS)に対応
- Babel で ES5 へトランスパイル
- サイズが 100KB 未満の画像は JS にバンドル
- "~"をsrcディレクトリとしてエイリアス
- html も/distへ出力
- ビルドした JS を html のボディ最下部へ挿入
- ファビコンを html へバンドル
- fontawesome6 Free を使用可
- リセットCSSはdestyle.css
- jQueryに対応
開発用設定
- ファイルの変更を監視
- Hot Module Replacementをオン（変更箇所のみ更新）
- 実行時にブラウザを自動立ち上げ
本番ビルド用設定
- 画像を圧縮（設定いろいろ）
- webp を生成
こんな人向け
こんな人に使っていただけたらいいのかなと思っています。
- これからWebpackを勉強したい
- useとforwardを使いながら学びたい
- コーダーからフロントエンドエンジニアリングの世界へ一歩踏み出したい
あまり玄人向けではありませんが、最初はみな初心者。ぼくも初心者オブ初心者。
一緒に頑張っていこうぜっ。
おまけ
なんかimgフォルダに画像が入っていないとバグるので、以前食べた家系ラーメンの写真を入れておきました。ほんとすみません…。
家系 is God
Discussion