Webpack(付随してnpm)を学んでみた。

はじめに

現在、Laravel+Vue.jsのポートフォリオ作成を目指しています。

Vue.jsとLaravelを併用して使えるようになりたい。

ドキュメントを参考に好きなようにライブラリを追加できるようになりたい。

と思ったら、内部の理解が必要と感じたのでWebpackについて学習してみました。

Webpackの基礎

Webpackとは

公式リンク

webpackは、オープンソースのJavaScriptモジュールバンドラーです

複数のJavaScriptファイルを1つにまとめてくれます

対応するローダーが含まれている場合は、HTML、CSS、画像などのフロントエンドアセットを変換も可能です。

※Railsにも標準採用

※類似物にGulp。

メリット

ReactやVue.jsなどのフレームワークで依存関係のあるファイルを諸々まとめて見通しを良くしてくれます。

ブラウザでのリクエスト数を減らすことができる。⇒大規模な開発に向いている。

構成

webpack.config.js

webpackの設定ファイル

bundle.js

webpackを実行(npm run build)して出力されるファイル

package.json

プロジェクトの設定ファイル。webpackの実行はnpmで行うため。

ローダー

JavaScript以外のコードもバンドルできるようにモジュールに変換するプログラム。

おそらくこのローダーを

※画像やSassなどをコンパイルできる。JSでもVueコンポーネントやTypeScriptもこれにあたる。

プラグイン

webpackの機能を拡張するためのライブラリ。

npm

npmとは

Node Package Managerの略。JavaScriptライブラリのパッケージマネージャーです。

(PHPでいうComposer的な。)

メリット

重なったライブラリをダウンロードしなくてよくなる。(僕が諸々理解するきっかけとなった点)

package.json

npmプロジェクトの情報管理をしている。npmコマンドと連動。JSON形式で書かれている。

以下のコマンドで作成できる。

npm init -y

npmでよく見かける–save-devオプションはインストールするパッケージの情報をpackage.jsonに記録しなさいという意味。
(–saveオプションや–productionオプションもある。)

package-lock.json

npm install実行時に自動的に生成される。

ざっくりまとめると、インストールしたライブラリ間でのバージョンによる依存関係を確認するのに使われているらしい。

おすすめの学習方法

Webpackを学習すると、npmの知識も欲しくなります。

ですので以下の記事を事前に読むとよいかもしれません。(僕も途中で読みました。)

【初心者向け】NPMとpackage.jsonを概念的に理解する(Qiita)

webpack 4 入門(Qiita)

この記事がわかりやすいです。

速習webpack 速習シリーズ

上記の記事に加えて山田さんの書籍を僕は読みました。(ざっくりですが)

KindleUnlimitedだと無料なのがありがたいです。

おわりに

Webpackの学習を通じて、npmやComposerなども芋づる式に理解を深めることができた。

普段、意識せずともチュートリアルなどはこなせるけど、アレンジや自己開発をするとなると改めてここら辺の理解は必須だと思った。

引き続き、LaravelやVueプロジェクト内に作成されるファイルは1つ1つしっかりと向き合っていこうと思います。

学習記録(※備忘録※)

学び

・YarnはFacebookが開発したらしい。

・Webpack⇒npm学習することでComposerの根本的な部分の理解にもつながった。これでかい。

参考

Wikipedia

速習webpack 速習シリーズ

webpack 4 入門(Qiita)

⇒この方が出版している書籍 webpack 実践入門: webpackの基礎をしっかり理解して使いこなす(KindleUnlimitedなら無料)

最新版で学ぶwebpack 4入門 JavaScriptのモジュールバンドラ

【初心者向け】NPMとpackage.jsonを概念的に理解する(Qiita)

npmのpackage.jsonと依存関係を理解しよう!

JSONの形式を完全理解して読み書きできるようになるための記事 JavaScript Object Notationの略

【PHP】Composerは絶対必要!インストール方法と解説で完全攻略

コメントを残す