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はこんな感じになり、インストールされたことを確認できる。

{"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

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で問題ないです。)

importpathfrom'path';exportdefault{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やらについても書いてみたい。