はじめに

0. 感想

Webpackは簡単にいうとフロントエンドのソースコード管理ツールで、CSSやJS等のコードを圧縮または変換する。（SASS → CSS, ECMAScript2015 → JavaScriptなど）
- Railsエンジニアからすると、Asset Pipelineとやっていることは近い。
↑を行うために、様々な ローダー や プラグイン というものを使用する。

概要

1. webpackとは？

JS, CSS, 画像などを一つにまとめるためのツール。
- モジュールバンドラーと呼ぶ。
  - バンドル ≒ ビルド

webpack以前

各.htmlファイルで <script> 要素を列挙していた。
- 以下のような問題点があった。
  - <script> 要素は順番に実行されるので、並び順に注意を払う必要がある。
  - ライブラリ同士やアプリ本体のコードが互いに依存関係にあるような状況が発生してしまう。

<script src='lib.js'></script>
<script src='app.js'></script>

webpack以降

モジュールバンドラーの利用によって、以下のようなメリットがあった
1. 自動的に依存性を解決する
  - 一つのファイルにバンドルしてくれるので、HTML側でコードの依存関係を意識することがなく、まとめられたファイルをインポートさえすれば良くなった。
2. リクエストの回数を抑える
  - 複数ファイルを一つにまとめることで、ブラウザ/サーバー間のリクエスト数を減らすことができた。
3. 大規模な開発に向いている
  - コードをクラス/関数の単位でモジュール（ファイル）として細かく分割できるので、ここのファイルの見通しが改善され、名前空間を明確に分離できるようになった。

2. webpackの仕様

2-1. さまざまなモジュール形式を解釈できる。

CommonJS
- module.exports.add = require('hoge') みたいなやつ。
AMD
ES Modules

2-2. ローダー/プラグインが豊富。

ローダー
- リソースを読み込むためのライブラリ。
  - 画像やスタイルシートなどをバンドルすることが可能。
  - TypeScriptなどのaltJSコンパイルした上でバンドルすることが可能。
プラグイン
- webpackそのものの拡張。
  - コードの圧縮（minify）。
  - バンドルしたファイルを実行するためのページの生成。

タスクランナー・ビルドツール

Grunt, gulpなどがある。

2-3. フレームワークでの採用実績が増えている。

Angular, React, Vue.js などのJavaScriptフレームワークのコマンドラインツールでは、内部的にwebpackが利用されている。

3. モジュールバンドラーの基本

「モジュールを束ねる」という性質上、モジュールの理解が必須。
- JavaScriptにおけるモジュールとは、即ちファイルのこと。
  - ファイル名がそのままモジュール名を意味する。
export が指定されていないメンバー（変数/関数/クラス）は、モジュールの外からは参照できない
- これによって名前の競合を防げる。
import/export を全てのブラウザーで認識できるわけではないため、モジュール間の依存関係を解釈し、一つに束ねるのがモジュールバンドラーwebpack。

4. webpackを利用する

4-1. Node.jsのインストール

webpackは、Node.js上で動作するコマンドラインツール。
- webpackを利用した開発では、アプリをNode.jsプロジェクトで管理するのが一般的。

4-2. package.jsonの作成

package.jsonはNode.jsの設定ファイル。
- アプリの基本情報、プロジェクト固有のコマンド、利用しているパッケージ（ライブラリ）などを管理する。
npm init -y というコマンドによって生成される。

4-3. webpackのインストール

Node.jsプロジェクトにwebpackをインストールする。

npm install --save-dev webpack webpack-cli
- --save-dev オプションは、インストールするパッケージの情報をpackage.jsonに記録しなさい、という意味。 --save オプションでインストールされたパッケージは、 package.json内の dependencies ブロックに記録される。
  - package.jsonでパッケージ情報をまとめておくことで、あとから別の環境で必要なライブラリを準備したい場合にも npm install コマンド一つで再現できる。
    - --save-dev オプションは、アプリ開発で利用するツールをインストールする場合に利用する。 --save オプションはアプリそのものの実行で利用する。
- インストールに成功すると、プロジェクトルートに /node_modules フォルダーが生成され、配下にパッケージ本体（ライブラリ）が保存される。

5. webpackの基本

/dist/index.html
- JavaScriptファイルを呼び出すためのページ
/src/index.js
- 各モジュールを呼び出し、実行するコード。エントリーポイント。
  - index.htmlがindex.jsを参照する。
npx webpack
- プロジェクトローカルにインストールされたパッケージのコマンドを実行。
  - webpacの既定では、/src/index.jsがエントリーポイントとなり、バンドルの結果は/dist/main.jsに出力される。
    - 生成されたmain.jsには
      - モジュールを解決するためのコード
      - エントリーポイント
      - エントリーポイントが依存するコード
        
        が一式含まれており、ページからは最終的な出力ファイル(main.js)をインポートするだけでアプリを実行できる。
        
        <script src='./main.js'></script>

6. 設定ファイルの基本

実際の開発では、#5 で述べたような規定の動作だけでは不足で、「入出力先を変更したい」「ビルドにあたって任意の処理を追加したい」「そもそも処理対象のファイルを限定したい」など、細やかな挙動を指示する必要が出てくる。
- これらの挙動は npx webpack コマンドのオプションとして指定することもできるが、あとで繰り返し実行することを考えれば、設定ファイルとしてまとめておくのが便利かつ一般的。

6-1. 設定ファイルの骨組み

エントリーポイントと出力先ファイルを設定ファイルで指定し、ビルドする。

// webpack.config.js

// 設定ファイルの外枠
module.exports = {
  // エントリーポイント
  entry: './src/index.js',
  output: {
    // 出力先のフォルダ
    path: `${__dirname}/dist`,
    // 出力先のファイル名
    filename: 'main.js'
  },
};

> npx webapck --config webpack.config.js

コマンドを実行後、dist/main.jsにエントリーポイントをビルドした内容が出力されていれば、ビルドは成功。

ビルドコマンドのショートカット

package.json内で設定できる。

...
'script': {
  'build': 'webpack --config webpack.config.js'
}
...

// 以下は同じ
> npm run build
> npx webpack --config webpack.config.js

6-2. 開発サーバーの導入

コードを修正する度にビルドコマンドを再実行するのは面倒。
- webpack-dev-serverを使って自動で再ビルド、ブラウザーのリロードを実行できる。

webpack-dev-serverのインストール

> npm install --save-dev webpack-dev-server

// webpack.config.js

module.exports = {
  entry: './src/index.js',
  output: {
    ...
  },
  devSerevr: {
    contentBase: './dist' // コンテンツの基底パス（検索先）の宣言
  },
};

// package.json

'script': {
  'start': 'webpack-dev-server --open', // --open: サーバー起動時にブラウザを開く
  'build': 'webpack --config webpack.config.js'
},

> npm start // npm run startとどちらでも良い。

開発サーバーによるビルドについて

開発サーバーは、ビルドの結果をメモリー上で管理している。
- よって、元からある/dist/main.jsには再ビルドの結果は反映されない。ビルドの結果をファイルに保存したい場合には、 npm run build コマンドを利用する。

watchモードによるファイルの監視

コードの編集時に再コンパイルするだけならば、webpack-dev-serverではなく、webpack本体のwatchモードを利用してもよい。


// package.json
{
  'name': 'basic',
  ...
    'build': 'webpack --watch --config webpack.config.js',
  ...
}

npm run build コマンドを実行し、適当なコードを変更してみると、確かに自動的に再ビルドが実施されることが確認できる。
- 一般的には、開発サーバーを利用した方がブラウザーまで制御できるため便利。
  - ビルド結果をファイルできちんと確認したいなどの状況では、watchモードは重宝される。

本番/開発モードの選択

webpack.config.jsで mode パラメータを指定する。
- webpack4では必須。
開発モード
- よりデバッグに適したコードを高速に生成する
本番モード
- 不要なコードを削除し、できるだけサイズが小さく(minificationされる)、実行効率の良いコードを生成する。

ソースマップの生成

ビルド前後のコードをマッピングするためのファイル。
- ソースマップを利用することで、デバッグ時にも、エラー箇所を（バンドル前の）オリジナルのソースコードによって参照できるようになるので、問題の特定がしやすくなる。
devtoolパラメーターで 'eval-source-map' を使用すると、オリジナルのソースを得ることができる。

7. ローダー

webpackを学ぶということは、ローダーを学ぶことである、と言い換えても良い。
ローダーはリソースをモジュールに変換する。
- ローダーを利用することで、JavaScript以外のコード（スタイルシート、画像ファイル）でもバンドルできるように、モジュール（JavaScriptで処理できる形式）に変換してくれる。

スタイルシートのバンドル - css-loader/style-loader

css-loader
- スタイルシートを読み込むためのローダー。
style-loader
- スタイルを <style> 要素としてページに反映させるためのローダー。

> npm install --save-dev webpack webpack-cli css-loader style-loader

ローダーの有効化

設定ファイルに対して module - rules パラメータを追加する。

// webpack.config.js
module.exports = {
  ...
  modules: {
    rules: [
      {
        test: /.\css$/,  // ローダーを適用するファイル
        use: [  // 適用するローダー
          'style-loader',  // 2. モジュールをページに組み込む
          'css-loader'  // 1. *.cssファイルがモジュール化
        ]
      }
    ]
  }
}

スタイルシートを要素で出力する - ExtractTextPlugin

style-loader/css-loaderの組み合わせでは、バンドルされたスタイルは <style> 要素としてページに埋め込まれる。
- 一般的には、スタイルシートはページとは別ファイルとし、 <link> 要素で埋め込むのが普通。
  - ExtractTextPluginによって、バンドルしたリソースをファイルとして切り出す。

> npm install --save-dev webpack webpack-cli css-loader style-loader extract-text-webpack-plugin@next

// webpack.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  ...
  modules: {
    rules: [
      {
        test: /.\css$/, 
        use: ExtractTextPlugin.extract({ use: 'css-loader' })  // 2. プラグインを割り当てる。
        ]
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css'),  // 1. スタイルシートの出力ファイル名を指定。
  ]
}

プラグインを有効化するには、require関数でインポートした後、pluginsパラメーター配下でプロジェクトに登録する。
出力ファイル名には [name].css のようにプレイスホルダーを含めることもできる。
ExtractTextPluginそのものはスタイルシートをモジュール化する機能は持たないので、extractメソッドの引数（useパラメーター）に、そのためのローダーを指定する。

その他のローダー

url-loader

画像をバンドルする。
- 無条件に全ての画像を束ねてしまうのは望ましくない。
  - 理由1: オリジナルファイルよりもサイズが大きくなる
  - 理由2: 解析のためのオーバーヘッドが発生する
リソースをファイルとして出力し、そのパスを管理する。
- url-loaderの optins - limit パラメーターで、画像サイズが閾値を超えたらファイル出力する、というような設定ができる。
本番環境で画像ファイルをCDNに配置する場合、 output - publicPath パラメーターを設定する。
- これによって、ビルド時にurl関数の値をリライトできる。

file-loader

フォントファイルをバンドルする
- ネット経由でフォントを取得し利用する、Webフォントをバンドルする。

babel-loader

ES2015以降のコードを、バンドル前にBabelによってトランスコンパイルする。
- ブラウザのサポート率が低いES2015以降の構文を、より低いバージョンのJavaScriptに変換する。

ts-loader

TypeScriptのコードをコンパイルし、JavaScriptコード（既定ではES5のコード）に変換する。

sass-loader

Sass（Syntactically Awesome Stylesheets。制御構文、関数、ミックスインなど、スタイルシートをよりコンパクトにまとめるための言語機能を備えた言語）をコンパイルし、標準的なCSSスタイルシートに変換するためのローダー。
- css-loader , style-loader , node-sass（Node.js上でSassをコンパイルするためのライブラリ）とのセットで利用する。

es-lint-loader

ESLint（静的コード解析ツール）をwebpack上で実行するためのローダー。
- いろいろ設定があるらしい。

参考

速習Webpack