この記事は速習webpack 速習シリーズの読書メモです。
本書の内容をかいつまんで要約した記事になりますので、気になったらご購入をお勧めします。
#webpackとは
複数のJavaScriptファイルのリソースを一つに束ねるツールである。
その機能をモジュールバンドラーといい、昨今ではフロントエンド 開発で欠かせないツールである。
##使用上のメリット
###1.依存関係の解決
複雑なアプリでは使用するライブラリ同士の依存関係を把握することが難しいが、モジュールバンドラーはその依存関係を開発者が意識しなくて済むよう自動的に依存関係を解決してくれる。
###2.リクエスト回数の抑制
複数のファイルを一つにまとめているため、リクエスト回数が減少し、転送効率が上昇する。
###3.大規模開発に向いている
一つのファイルをクラス（関数群）単位でモジュール化することで名前空間がファイルごとに分離しているため、複数人での開発にも向いている。
▪️複数のモジュールに対応
・CommonJS
・AMD
・ES Modules★
ECMAScript2015（ES2015）で標準化されたモジュール仕様
▪️ローダー、プラグインが豊富
webpack自体にJavaScriptファイル以外のバンドル機能はないが、ローダーを使用すればスタイルシートや画像ファイルもバンドル可能になる。cssファイルもSASS形式からコンパイルした上で利用できる。TypeScriptなどのaltJs言語をコンパイルして利用することも可能である。
▪️フレームワークでの採用実績
Vue.jsやAngular、ReactなどのJavaScriptフレームワークで内部的にWebpackが利用されています。
例：vue-cli
Ruby on Railsでも5.1以降webpackが標準採用されているよう。
###4.ライブラリを再現できる
別環境でライブラリを準備したい時、package.jsonをコピーしてnpm installすれば同じライブラリをインストールできる。
##モジュールの書き方
//定数
export const NAME = 'Calc';
// クラス
export class Calc {
static getAddResult(a,b) {
return a + b;
}
static getTriangle(base,height) {
return base * height / 2;
}
}
###インポート、使用例
import { NAME } from './calc';
import { Calc } from './calc';
console.log(NAME); //Calc
Calc.getTriangle(5,4); //10
Calc.getAddResult(5,3); //8
###export defaultの書き方
export default class {
//定数
export const NAME = 'Calc';
// クラス
static getAddResult(a,b) {
return a + b;
}
static getTriangle(base,height) {
return base * height / 2;
}
}
###インポート、使用例
import Calc from './calc';
console.log(Calc.NAME); //Calc
Calc.getTriangle(5,4); //10
##webpack.config.jsについて
webpackの設定を記載するファイルで、ビルド時に行う細かい設定や制御を追加できる。
詳しくは「webpack.config.jsがわからない」の記事がお勧め。
###・Entry
ビルドの起点ファイル。
###・Output
バンドル後の出力ファイル
###・Loaders
javaScriptファイル以外をバンドルする際に使用。
css-loader等の設定をここに記載する。
###・Plugins
webpackの機能を拡張するライブラリ。
#最後に
本書はwebpack.config.jsの説明が半分以上を占めています。
そのことから、webpackの要は設定ファイルにあることがわかりました。ローダーやプラグインの説明が具体的にされていたので、webpack.config.jsの書き方がいまいちわからないという方には是非お勧めしたい本です。
ページ数も少なく、「速習」というだけあって手軽に読めました。
著者が山田祥寛さんということで、私のJavaScriptの教科書「改訂新版JavaScript本格入門」の著者でもあるので安心と信頼のわかりやすさでした。kindleでお安かったです。
###参考リンク
JavaScript本格入門を読んで、初心者がつまづいたポイントまとめ
[改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで]
(https://www.amazon.co.jp/%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88JavaScript%E6%9C%AC%E6%A0%BC%E5%85%A5%E9%96%80-%E3%83%A2%E3%83%80%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AB%E3%82%88%E3%82%8B%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E7%8F%BE%E5%A0%B4%E3%81%A7%E3%81%AE%E5%BF%9C%E7%94%A8%E3%81%BE%E3%81%A7-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B/dp/477418411X/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=Javascript%E6%9C%AC%E6%A0%BC%E5%85%A5%E9%96%80&qid=1563172447&s=gateway&sr=8-1)