ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

中級者 - webpackの技術情報

webpackは、HTML, CSS(SASSなど), JavaScriptで作るWebサイト環境のビルドツールです。

元々は、1つのJavaScriptファイルにHTML, CSS, 画像などのリソースを全部入れて、Webサイトのリソースを1つのHTML(index.html)と1つのJavaScriptファイルだけにするものでした。

しかし今は、JavaScriptを対象のバージョンに変換するトランスパイル、SASSなどの高機能CSS作成言語のCSS変換など、Webサイト開発環境の総合ビルドツールになっています。

このようなツールはWeb開発の必須といっていいでしょう。そんなwebpackについて情報を発信します。

自分で情報を探しながらやっても、なかなかスムーズに答えにたどりつかない人向けです。

経験が足りないだけで、遅かったり、失敗しても自信をなくさなくていいです。いまは大きくなるために、技術を知って試す時期なので。

むしろたくさん悩んで、フリーズして、失敗してください。気がついたら最適な答えを出す力が自然と身についているでしょう。

webpack5, 環境移行はNode.jsのバージョンに気をつけよう!

Node.js image

webpackを使った環境は、package.json, package-lock.jsonファイルさえあれば、コマンド一発で他PCでもまったく同じ環境が作れます。

ただエラーが出たときはツラい。原因はNode.jsのバージョン違いだったんですが、そのエラーはバージョン違いが想像できない内容になることがあるから。

続きを読む

webpack5, node-sassはNode.jsのバージョンに影響される

Node.js image

webpackのプラグインnode-sassは、Node.jsのバージョンに大きく影響されます。

node-sassのバージョンとNode.jsのバージョンは対応表があるほど。

でも、エラー内容からはそれが想像できません。これを解決するのに2時間かかった。

続きを読む

webpack4 -> 5 移行ガイドを読んでその通りにやってみる。

Node.js image

webpackを4から5へアップデートしましたが、移行ガイドを読まずに自力でできてしまったので、改めて移行ガイドを読んでみます。

抜けがないか確認のため。設定の細かいカスタマイズをしてる人は一読する価値あり。基本設定で済ませていれば、そこまで必要はなかったかな?

続きを読む

webpackを4から5にアップデートしたら起きたこと。これはスタートに過ぎない。

Node.js image

webpackを4から5へアップデートしました。エラーはちょいちょい出ていて、うまく行ってるところ、そうじゃないところがあります。

ひとつひとつ見ていきましょう。

これは移行作業の序の口です。その後にプラグインのアップデート、エラーが出たらその修正が必要です。

続きを読む