🍜

Webpack5を使用したWeb制作向けテンプレート

2022/10/07に公開約1,300字

2022年10月、我々Web制作者が大変お世話になってきたSCSSの@import構文がサポートを終了しました。
これから始めるプロジェクトは原則、@use@forwardを使わなければなりません。

「あー、useとforward対応しなきゃなあ。ついでにGulpもやめて最近よく聞くWebpackに手を出してみようかなー」

…というそこのあなたのために、Webpackを使った超ミニマルなWeb制作テンプレートを作ったので共有します。

概要

今回共有するリポジトリは、僕が案件で使うときにおおよそ共通する要素をテンプレートとして使い回せるようにしたものです。
メディアクエリの変数とか非常に少ないですが、「まあこれからコンテナクエリの時代だし(?)」 ということで多めに見ていただいて、自由にカスタムしてみてください。

https://github.com/nawo-mat/web-template

特徴

特徴(というか設定項目)はざっと以下の通り。(ほぼ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を使いながら学びたい
  • コーダーからフロントエンドエンジニアリングの世界へ一歩踏み出したい

あまり玄人向けではありませんが、最初はみな初心者。ぼくも初心者オブ初心者。
一緒に頑張っていこうぜっ。

https://github.com/nawo-mat/web-template


おまけ

なんかimgフォルダに画像が入っていないとバグるので、以前食べた家系ラーメンの写真を入れておきました。ほんとすみません…。

家系 is God

Discussion

ログインするとコメントできます