Rails5.1@webpackerのDocker環境で使うときのメモ 2017/11/11

はじめに

• いつのまにかwebpackerのconfigがpackage内に移ってた
  • 前の方法は使えない
• 環境変数でWebpack-dev-serverの設定を変更可能
  • docker-composeで開発環境動かしてるのでdocker-compose.ymlの設定を記述する
• ちょっとよくわからないのがhmrの設定方法

関連

• rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails
• webpacker/config.js at master · rails/webpacker

変更点

コンテナへ環境変数を渡して変更して貰う

docker-compose.yml

services:
  app:
    build: .
    environment:
      RAILS_ENV: development
      // ↓追加
      WEBPACKER_DEV_SERVER_HOST: 0.0.0.0
      WEBPACKER_DEV_SERVER_PUBLIC: example.local:3035 // 外部からアクセスする時に使われるIP等
      WEBPACKER_DEV_SERVER_INLINE: "true"
      WEBPACKER_DEV_SERVER_HMR: "false" 
    ports:
      - '3000:3000'
      - '3035:3035' // <- 追加

直接設定ファイルを書き換えても問題ない

config/webpacker.yml

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    disable_host_check: true
    use_local_ip: false

出力

BEFORE

$ bin/webpack-dev-server
Project is running at http://localhost:3035/
webpack output is served from /packs/
Content not from webpack is served from /code/public/packs
404s will fallback to /index.html

AFTER

$ bin/webpack-dev-server
Project is running at http://example.local:3035/          <- コレ
webpack output is served from /packs/
Content not from webpack is served from /code/public/packs
404s will fallback to /index.html
Hash: 2bf9e4a634e736c14d24
Version: webpack 3.8.1
Time: 5052ms

その他

環境変数から書き換えてるコードの場所

webpacker/package/config.js

// https://github.com/rails/webpacker/blob/b71db699e6937895b745cea6828a50d1d506037c/package/config.js#L11
const devServer = (key) => {
  const envValue = fetch(`WEBPACKER_DEV_SERVER_${key.toUpperCase().replace(/_/g, '')}`)
  if (typeof envValue === 'undefined' || envValue === null) return config.dev_server[key]
  return envValue
}

if (config.dev_server) {
  Object.keys(config.dev_server).forEach((key) => {
    config.dev_server[key] = devServer(key)
  })
}