「逆引きwebpack」を読みました

技術書典"3"で購入しました…やらなきゃいけなくなったので積読消化します。

booth.pm

TOC

  • はじめに
  • 本書の概要
  • 目次
    • 基礎設定
    • SCSS
    • SCSS + PostCSS
    • Babel
    • TypeScript
    • Vue.js
    • Vue.js + SCSS + PostCSS
    • webpack-merge
  • おわりに
  • おまけ

はじめに, 本書の概要

  • 本書には目的からどのようなwebpackの設定を作ればいいのかを掲載
  • 各項目をピックアップした目的
  • サンプルコードはmya-ake/reverse-resolution-webpackで公開している
  • 対象のwebpackバージョンはv3.8.0
    • 積読している間にv4系が来ちゃった…(現時点の最新はv4.8.3)

基礎設定

公開しているサンプルを使用すると以下の環境が整う。

  • 保存時自動ビルド
  • ローカルサーバー
  • ビルド後自動リロード
  • プロダクションビルド(簡易版)
  • プロダクションビルド後の動作確認
  • HTMLにoutputしたJSファイルのsrcを埋め込む
  • scriptタグにデフォルトでdeferやasyncを付ける
  • アウトプットするファイル名にハッシュ値を追加
  • npm scriptsを複数同時に実行
  • ビルド時にdistフォルダ内のファイルを削除
  • ローカルネットワーク内での共有
  • 複数ブラウザの同期

最高…

devtool

devtoolはソースマップのスタイルを決める設定。だが、ソースマップの品質とビルド速度に影響するので重要な項目。今回の設定では下記の値を用いている

  • 開発
    • cheap-eval-source-map: ビルド速度とソースマップの品質のバランスが良い
  • プロダクション
    • hidden-source-map: 本番稼働時はソースマップを見れるようにする必要がない

yarn clean

Node詳しくないのでrimrafしらなかった…便利。

TypeScript

tsconfig.json。あとで公式サイトを読みます。

Vue.js

Vue.jsのビルドにresolver.aliasを使っているのは、ビルドの種類がいろいろあるため

Vue.js + SCSS + PostCSS

Vue.jsの単一コンポーネントをビルドするにはvue-loaderを通す。各ブロックのlang に応じて通すloaderを変更できる。

webpack-merge

分割したwebpack.config.jsonをまとめる事ができる。共通部分 + (開発 || プロダクション)みたいなことをやれる。

おわりに, おまけ

初技術書でこのボリュームはすごい。Nuxt.jsでsass-resources-loaderを使うトピックは今まさにやりたいことだったので助かります。

感想

読むのを放置してしまったがためにwebpack 4系が来てしまった…折角の技術同人誌なのに鮮度がいいうちに読まないのは良くないですね…

逆引き辞書なのでさらっと目を通して終わりにしましたが、あとでプロジェクト作るのでその時活用させていただきます。
素晴らしい本をありがとうございました。