Webpack 入門 その1：Browserslist の概要把握・Webpack 環境構築

Browserify おじさんとしてモダン・フロントエンド界隈に入門した後、Gulp おじさんになって久しい今日この頃。Angular CLI や Vue CLI などを通じて Webpack をなんとなく触ってはいたが、自分でゼロから環境構築したことはなかったので、今回やってみることにした。

といいつつも、当初の狙いは Webpack ではなく、Browserslist を知ることだったので、その学習をメインに据えている。

目次

• Browserslist とは
• Webpack 素振り環境を構築する
• Webpack 設定ファイルを書く
• ビルドしてみる
• 次回に続く

Browserslist とは

Browserslist と呼ばれる設定情報が GitHub 上で共有されている。

• GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env

コレは何なのかというと、JavaScript や SCSS などをトランスパイルする時に、どのブラウザをサポートしたいか、どのバージョンのブラウザを対象外とするか、という条件を決められるモノ。

Browserslist に対応しているツールとしては、Babel、PostCSS などがある。これらのツールは、Browserslist が定める書式に従って用意された設定ファイルを読み取って、

• 「このプロジェクトは IE 対応は不要らしいから、この辺の Polyfill は含めないようにしよう」
• 「このプロジェクトは古い Safari を対象にしたいようだから、このベンダ・プレフィックスを追加しよう」

という風に、トランスパイル時に考慮してくれるワケだ。

Browserslist の設定は .browserslistrc ファイルか、package.json 内に書ける。自分が作ったことのある Angular CLI プロジェクトや Vue CLI プロジェクトなんかには勝手に組み込まれていて、以下のような設定が書かれていた。

• .browserslistrc

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
#   npx browserslist

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

• package.json

{
  // …中略…
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
}

自然言語として読みやすい指定方法だ。

• defaults を指定すると、> 0.5%, last 2 versions, Firefox ESR, not dead を指定したのと同じ結果になる。最近のモダンブラウザをサポートする意味となる
• > 0.5% などはブラウザのシェア率を見ているらしい
• last 1 firefox version など、ブラウザ別・バージョン別のサポート範囲も決められる
• dead はサポートが切れているブラウザのことで、not dead と書くとサポートが切れているブラウザを対象外とするようだ
• not ie 9-11 は IE 9〜11 を対象外とする指定

といった感じらしい。

コレがどんな風に作用するのか自分で確認したいなと思い、SCSS や TypeScript なんかをトランスパイルする環境を作ろうと思い立ち、「そういや俺ゼロから Webpack 書けねえな」と気付き、Webpack の勉強を始めることにした次第。

Webpack 素振り環境を構築する

ということで、Browserslist を試すための、Webpack 素振り環境を構築する。

成果物は以下の GitHub リポジトリにアップしているので、ソースコードをより追いかけたい人は、コミットログを追うなどして確認して欲しい。

• Neos21/practice-browserslist

Webpack 公式のガイドを見ながら進めることにする。

• 参考：Getting Started | webpack

まずは適当な作業ディレクトリを作り、Webpack をインストールする。

$ mkdir practice-browserslist && cd $_
$ npm init -y
$ npm install -D webpack webpack-cli

• package.json : インストールされたバージョン

"devDependencies": {
  "webpack": "4.44.0",
  "webpack-cli": "3.3.12"
}

次にソースコードを作る。まずはテストとして、1行の JS ファイルを作る。

$ mkdir -p src/js/
$ echo "console.log('Test');" > src/js/main.js

package.json には次のように動作確認用の npm-scripts を書く。

"scripts": {
  "start": "npm run build && node ./dist/js/main.js",
  "build": "webpack"
}

npm run build で Webpack ビルドして、その成果物が ./dist/js/main.js に出来る前提として、それを node で実行する、というモノ。

ちなみにココまでだったら、ソースコードを直接実行できる。

$ node ./src/js/main.js
Test

Webpack 設定ファイルを書く

それではこのソースコードを、Webpack でバンドルするための設定ファイルを書いていく。

webpack.config.js というファイルをプロジェクトディレクトリ直下に作り、次のように書いてみる。

• webpack.config.js

const path = require('path');

module.exports = {
  mode: 'production',  // モード指定
  entry: './src/js/main.ts',  // エントリポイント
  // 出力先パス・ファイル名
  output: {
    path    : path.resolve(__dirname, 'dist/'),  // 絶対パスで記述する必要がある
    filename: 'js/[name].js'
  }
};

とりあえず、エントリポイントとなるソースファイルと、それをビルドして出力する先を指定した。

ビルドしてみる

コレでいったんビルドして動作確認してみる。

# npm run build でビルドしたファイルを実行する
$ npm start

> practice-browserslist@ start /Users/Neo/practice-browserslist
> npm run build && node ./dist/js/main.js

> practice-browserslist@ build /Users/Neo/practice-browserslist
> webpack

Hash: 90df6e535afa96d8701c
Version: webpack 4.44.0
Time: 242ms
Built at: 2020-07-28 10:50:18
     Asset       Size  Chunks             Chunk Names
js/main.js  949 bytes       0  [emitted]  main
Entrypoint main = js/main.js
[0] ./src/js/main.ts 20 bytes {0} [built]

Test

元が20バイトで、ビルドしたら949バイトって、増えてない？

生成された ./dist/js/main.js を見てみると、export などを処理するためのコードが埋め込まれており、最後の方に console.log("Test") というソースコード部分が埋め込まれている。これらは1行にまとめて圧縮されている。

なるほど、Webpack はモジュールをバンドルするためのコードを埋め込み、コードの圧縮まではデフォルトで行ってくれるというワケだ。

次回に続く

というワケで Webpack 素振り環境ができた。

次回はココにあれこれ設定を追加して、SCSS や ECMAScript、そして TypeScript などをトランスパイルしていきつつ、Browserslist の効果を確認していく。