webpack初学者です。
調べていく中で色々単語が出てきて混乱していたので、整理しました。
かなりざっくりです。ふんわり雰囲気を把握したい心の広い方はどうぞ。
Node.js
サーバーサイドで動作するjavascript。
フロントからサーバーまで１つの言語で記述することができる。
チャットなど、リアルタイムで反応が必要なアプリの開発などに向いているらしい。
npm
Node Package Manager。パッケージ管理お助けポジション。
Node.jsで書かれている様々なパッケージ達を管理している。
npm init→カレントディレクトリにpackage.jsonファイルが生成される。
このファイル内に、npmでインストールしたファイル達が記述されていく。
npm install [インストールしたいパッケージ名]→目的のパッケージ + 依存関係にあるパッケージを一緒にインストールしてくれる。便利。
アンインストールなどもコマンドで簡単に行えるので管理がすごく楽そう。
webpack
Node.jsで作られたパッケージの１つ。
npm install webpackでインストールできる。
役割はバンドラー（sourceまとめポジション）。
css、js、画像などを、様々な加工をしながらまとめてくれる。
設定はwebpack.config.jsに記述していく。
設定次第で色々便利に使えるらしい。下記はよく使われる例。
- js：書式の変換、バンドル
- scss：コンパイル、minify、autoplefixなど
- 画像とか：自動圧縮
とりあえずは概要理解です。
次は実際自分でwebpack環境を構築してみようかと思います。
道のりは果てしないですが、少しずつ。
実際のwebpack設定サンプルが知りたい方はこちらの記事からどうぞ。
