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

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

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

目次

Browserslist とは

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

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

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

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

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

# 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'.

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

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

といった感じらしい。

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

Webpack 素振り環境を構築する

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

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

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

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

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

"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 というファイルをプロジェクトディレクトリ直下に作り、次のように書いてみる。

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 の効果を確認していく。