概要
Rails 5.1からwebpacker gemで簡単に導入が可能となったwebpack。
では、webpackとはなんなのか？
railsは使っているけれど、webpackは全く知らない。
そんな方に向けた記事となっております。
自分もwebpackについて理解が浅いですが、webpackについて勉強した成果をここでまとめていこうと思います。
間違いなどもあると思いますが、その際はご指摘いただけると大変助かります。。。
webpackとは何ぞや？
webpackとはNode.jsの中で定義されているモジュールバンドラーツールのこと。
モジュールバンドラーツールとはファイルをまとめるツールを指す。
webpackではrequireなどの依存関係を解決した上でモジュールを一つのファイルにまとめてくれる。
この様にファイルをまとめることがwebpackの主要な役割。
なぜ、ファイルをまとめる必要があるのか？
ファイルを一つにまとめることでHTTPリクエストの数を減らすことができる（負荷を軽減）
100個のファイルを100回読み込むことと１００個のファイルを一つにまとめたファイルを一回読み込むのでは処理の速度は全然違う
webpackの設定方法
webpackを使用したいディレクトリに移動後
npm init
上のコマンドを打ち込むことで現在のディレクトリにpackage.jsonが作成される
npm install --save webpack
npm install --save webpack-cli
Node.jsのライブラリの一つであるwebpackを
次にpackage.jsonのscriptフィールドにてwebpackを指定する
scripts{ "build":"webpack"}
scriptフィールドにbuildコマンドでwebpackを使うことを記述
npm run build
これで上のコマンドを打ち込むことでwebpackを使用できるようになった
続いて行なうのはwebpack自体の設定
webpackをインストールした際にwebpack.config.jsというファイルが作られる
webpack.config.jsはwebpackの設定を行なうファイル
此処にエントリーポイントなどの設定を記述していくことでwebpackが動作するようになる
長くなってきたのでwbpack.config.jsの設定については別の記事でまとめようと思います。