webpack合宿

はじめに

東京オフィスでコーダーをやっているNです。
雨天が続き気分が沈みがちな中、ボーデン・バレット選手が日本のリーグにくるというビッグニュースにテンションが上がっています。

入社して2ヶ月弱となりました。
完全未経験ではないものの、経験浅めで入社したため勉強しないといけないことが山積みです。
ただ、運よく勉強が半分趣味のようなものでどちらかというとワクワクしています。

webpack合宿の開催

静的ページのコーディングがまあまあできるようになってきたので、少しずつhtmlやcssと並行して未開拓の分野も勉強していきたいと思い、さて何から勉強しようかと思った時に、まずはこれかなと思ったのがwebpackでの開発環境の構築でした。

開発環境はこれから様々な技術を勉強するにしてもその土台になりますし、自分でイチから構築してみることで理解も深まると思ったからです。

引き継ぎ案件でwebpackが使われているということもあるでしょう。
そして何より自分で構築した開発環境でコーディングしたいです。

(開発環境といえば、gulpというのもありますが、gulpのモジュールと同等のモジュールがwebpackにあるのと、ReactやVueなどがwebpackベースで開発されているため、最近はgulpは下火になってる印象があります。)

週末に用事が入っていないときはまとまった時間が取れます。

こういうときは、あるテーマを決めて家(もしくはカフェ)にこもってガーッと勉強することがあります。これを勝手に合宿と呼んでいます。(タイトルが紛らわしいですが、会社のメンバーで勉強合宿に行ったわけではありません。)

ということでこの前の週末、webpack合宿を行いました。

9時起床。
用いた教材は、udemyの動画3本と電子書籍3冊という合宿にぴったりな豪華6本立て(+ ググる)。

寝食以外はひたすらエディタと向き合います。
(たまに息抜きとしてYoutubeでおすすめに出てくる犬の動画とかを適当に見ます。)

そんなこんなで2日間を過ごし、結果はどうだったでしょうか。

合宿の成果

結論としてはなんとか業務で使用できるくらいの環境を構築できました。
webpack.config.jsの中身はわざわざここには載せませんが、機能としてはざっくり以下のような感じです。

  • jsのES6からES5に変換(Babel)
  • jsの文法チェック(Eslint)
  • scssのコンパイル
  • cssファイルはjsファイルと分離
  • ベンダープレフィックス自動付与(PostCSS)
  • 画像圧縮
  • htmlテンプレートエンジン(ejs)でheaderなどを共通化

ベテランの方から見ればなんてことないいたって普通な感じです。
(htmlテンプレートエンジンはpugというのもありますが、タグがないのがどうも慣れず、、)

あとは、実際に使いながらブラッシュアップしていこうと思っています。
(何か便利なプラグインなどありましたら教えてください。)

合宿で苦労したこと

今回の合宿では全てスイスイ行ったかと言えばそうではありません。

例えば、ejsから生成されたhtmlをwebpackの開発サーバーで見たとき、画像が表示されない問題で小5時間くらいハマってしまいました。

画像はfile-loaderというのを用いるのですが、まずは自分の思い通りのディレクトリに圧縮された画像が生成されるようにして、それがちゃんとブラウザで表示されるようにする必要があります。

やっと画像が表示されたかと思ったらhtmlに指定した画像だけが表示されてscssで指定したbackground-imageが表示されず、、手を替え品を替え、、、といった具合です。

あと、jqueryの読み込みを各jsファイルでしなくて良いようにwebpack.config.jsに記述を追加しているのに $ is not defined no-undef というエラーが出続けて、これも小3時間くらい取られました。

エラー文をよく見ると、eslint-loaderがエラーを出しているようでした。

Module Error (from ./node_modules/eslint-loader/dist/cjs.js):

.eslintrcに以下を追記する必要があったみたいです。

{
  "env": {
  "jquery": true
 }
}

エラー文をもっとよく見ていれば10分で対応可能でした。

まだ納得がいかない部分

しっくりきてない部分もあります。

htmlファイルを生成するときはプラグインを用いるのですが、どうやらwebpack.config.jsにhtmlファイル(ejsファイル)の数分だけ記述が必要みたいです。5,6ページならまだしも1000ページを超えるサイトもありますからね、、1000ページ分の記述をしないといけないのでしょうか?

(ちなみにまだ100ページ超のサイトを作ったことはないです。いつか作ってみたいですが、クラス名の付け方やどこまでを部品=コンポーネントとするかなどで死ぬほど悩みそうです。)

また、生成されたhtmlを見てみると、もともとejsでテンプレートをincludeなどしているせいか、ソースコードが揃っていない部分があったりして気になります。
自動で綺麗に揃ってくれたら嬉しいところです。

おわりに

今回の合宿を通して無事に最低限の環境構築が出来てホッとしていますが、webpack、まだまだ中の仕組みは未知な印象があります。

とは言え、普通のコーディングだけだとwebpackを使わなくてもVScodeのプラグインやPreprosを用いてscssのコンパイルは出来ますし、画像の圧縮もWebサービスを利用して簡単に出来ます。

もしwebpackという存在自体が意味不明すぎて毎日眠れないという方は一旦気にしなくて良いと思います。

楽しくやっていきましょう。

次回もよろしくお願いします。