フロントエンドエンジニアのための webpacker

webpacker:install:react とかはしない。Rails上で素の webpack がほしい人のためのガイド。

rails new ~ で webpacker が生成されるのは v5.1 以降らしいが、 Rails 4.2 以上ならインストール可能。

モチベーションとして、アセットサーバーとかダイジェストの生成とかを rails 側に投げたい。あわよくばいい感じに code splitting にも載せたい。そのための下調べ（この記事では code splitting までいかない。結局 digest の問題がある）

プロジェクトを生成

gem install rails -v 5.1.0
rails new mypackapp --webpack

後付の場合は Gemfile に webpacker を追記する。略。

bin/webpack と bin/webpacker をインストールする

bin/rails webpacker:install

そのままじゃなんか足りないのでyarnでインストールした

yarn add webpack @rails/webpacker -D

アセットサーバーを立てる

bin/webpack-dev-server

プロダクション用の Hash digest 付きで出力

bundle exec webpacker:compile

実際のコードと設定

• app/javascripts/packs 以下の .js がエントリポイントになる
• <%= javascript_pack_tag 'application' %> で app/javascripts/packs/application.js を エントリポイントにwebpackでビルドしたもので返却する
• webpackの設定は config/webpack/* にあるように見えるが謎の定義ファイルを require してる
  • 実体は https://github.com/rails/webpacker/blob/master/package/environment.js の Environment#toWebpackConfig()
  • (正直面倒なので外出ししないでほしい)
  • ちゃんと追ってないけど、デフォルトだと babel-loader 通って .babelrc も読まれる

つまり実際に webpack の設定をガリガリ拡張したりする場合はこうなる

// config/webpack/development.js
const environment = require('./environment')

module.exports = Object.assign({}, environment.toWebpackConfig(), {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [{ loader: 'babel-loader' }]
      }
    ]
  }
})

↑は自分で babel-loader を定義する場合。どうせ production もやるんだから environment 側に寄せてもよさそう。