webpack超超入門(備忘)

webpackとは

webpackはフロントエンド開発用のモジュールバンドラー、簡潔にはモジュールをまとめてくれるツール

用語

• モジュール
  javascriptやcssなどのファイル。

• バンドル/バンドルファイル
  モジュールが一つにまとめられたファイル。

• ビルド
  バンドルを出力するまでの一連の処理

利点

• 機能ごとにファイルを分割(モジュール化することができる。)
• 可読性の向上
• 開発作業の分担やテストがし易くなる
• モジュールの再利用性を向上できる。
• 転送効率を向上させることができる。
• 最適化されたファイルを出力できる。

install

何はともあれやってみないといまいちよくわからないので、早速nodeからwebpackをインストール。

• 適当なディレクトリを切って、package.jsonを初期化

yarn init -y

• webpackとwebpack-cliをインストール(webpack4からcliが別モジュールとして管理されるようになったため、別途インストールが必要らしい。)

yarn add webpack webpack-cli -D

package.jsonはこんな感じになり、インストールされたことを確認できる。

package.json

{
  "name": "webpack-tmp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

バンドル確認

この段階でwebpackを実行して、モジュールをバンドルすることができるので、動作確認としてcliからバンドル。適当にjsを作成。

root/
　├ node_modules/
　├ src/     #作業ディレクトリ
　│　└ index.js
　└ package.json

index.js

console.log('bundle test');

webpackを実行。(modeオプションで開発用(development)かプロダクション用を選択できる。

yarn webpack --mode development

実行が完了すると、新たにdistフォルダが作られ、バンドルされたmain.jsが格納されていることを確認できる。

root/
　├ dist
　│　└ main.js ←new! 
　├ node_modules/
　├ src/     #作業ディレクトリ
　│　└ index.js
　└ package.json

webpack.config.js(webpackの設定ファイル)

cliでバンドルする際には、--modeや色んなオプションをコマンドで付与することでwebpackの挙動を制御をしますが、毎回それを打つのは面倒なので、設定ファイルを読み込ますことで様々な挙動をコントロールできます。

オブジェクトリテラル（名前と値のペア）で記述するだけなので、nodeがサポートしているcommonJSの記法(module.exports = ...)でも構わないのですが、個人的にes6で書きたいので、babelを使ってconfigをes6→es5にトランスパイルします。
具体的にはbabel/registerでconfigファイルを読み込む前にes6をトランスパイルさせます。

###install

yarn add @babel/core @babel/register @babel/preset-env -D

babelを使ってトランスパイルするので.babelrcをプロジェクト直下に配置します。(.babelrcはes6をトランスパイルできればいいので、適当)

{
  "presets":["@babel/preset-env"]
}

これでes6で書けるようになったので、中身を書いていきます。
babelでconfigファイルをトランスパイルする際は、webpack.config.babel.jsとしないと認識しないので注意(トランスパイルとか面倒なことしないよ、という場合はwebpack.config.jsで問題ないです。)

webpack.config.babel.js

import path from 'path';

export default {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  }
}

もうただバンドルするだけだぜ、な設定ですが、超超入門なので問題ないでしょう。
先ほどcliからwebpackコマンドでバンドルした際には--modeなどを設定しましたが、configファイル内に
オプションを記載してます。
見ればなんとなくわかるような気がしますが、それぞれの項目のざっとした意味を↓に。
詳細は公式なりを参照してください。

• mode: 'development' 'production' 'none'を指定する。productionを指定すると難読化や最小化を行ってくれる。（必須設定項目)
• entry: 'エントリーポイントとなるjsファイル
• output: バンドルした結果をどのディレクトリに、どのファイル名で出力するかの設定。

これでconfigファイルを使って、バンドルする準備ができたのでバンドルしてみます。
先ほどはオプション指定しましたが、configファイルを自動で読んでくれるので、今回は指定しないで大丈夫です。

yarn webpack

結果

コマンドが成功すると、以下のようなディレクトリになっているはずです。

root/
　├ dist
　│　└ main.js 
　├ public  ←new!
　│　└ bundle.js  ←new! 
　├ node_modules/
　├ src/     #作業ディレクトリ
　│　└ index.js
　└ package.json

webpack.babel.jsに書いた設定でバンドルできました！
javascriptだけ単純にバンドルする場合は以上のような感じになります。
webpackでは他にもloaderという機能を使ってjavascript以外（画像とかcss)をバンドルすることも可能です。

まとめ

おおざっぱに理解していたwebpackの知識を一旦整理してみたけど、loaderとかpluginの話に到達しないで力尽きた。。。
webpackをまとめようとすると、babelやらscssやらの話が付き纏うのでいまいちうまくまとめられない。
そのうちloaderやらについても書いてみたい。