Tech Racho エンジニアの「?」を「!」に。
  • Ruby / Rails関連

Webpacker v6.0.0.beta.6の現時点の変更点について

こんにちは、hachi8833です。

以下の記事を翻訳しようと思って動作確認するうちにWebpacker 6.0の開発が進められていることに気づいたので、変更点がどのぐらいあるかをとりあえずメモしてみました。Webpacker 5.0からの変更点、割と多い…😅。

Webpacker 6.0が正式にリリースされたら試してみようと思います。

本記事の内容は流動的であり、Webpacker 6.0のリリースまでに変わる可能性があります。

Webpacker 6.0は現在beta.6

rails/webpacker - GitHub

本記事執筆時点では、v6.0.0.beta.6タグ(2021/02/27)まで進んでいます。マイルストーンなどは見当たらないので具体的なリリース予定日は不明です。

また、Webpacker 6はwebpack 5と互換だそうです↓。

なお、Rails本家のWebpackerガイドは今のところWebpacker 5のままのようです↓。

Changelogより

未確定ですが、現時点のChangelogをメモしました。

  • node_modulesは今後デフォルトではコンパイルされなくなる。これにより、主にRailsの#35501やWebpackerの多数のissueが修正される。無効になったローダーは、引き続き以下のように明示的なrequireが必要な可能性がある。
const nodeModules = require('@rails/webpacker/rules/node_modules.js')
environment.loaders.append('nodeModules', nodeModules)
  • environment.jsにenvironment.loaders.delete('nodeModules')を追加した場合は削除しなければならない(でないとItem nodeModules not foundエラーが発生する)。
  • インストールタスクではすべての環境のextract_cssがデフォルトでtrueに設定される。また、デフォルトのapplication packに代えて個別のapplication.cssファイルが生成される。これはWebpacker 5.0.0で導入されたエントリごとの複数ファイルサポートによる(#2608)。
  • WebpackerのsplitChunks() APIのラッパーはデフォルトのruntimeChunk: 'single'になる(ページごとのマルチエントリポイントを使う場合の潜在的な問題防止に役立つ)(#2708)。
  • @babel/preset-envのオプションが、Babelドキュメントの推奨値であるautoに変更される(#2709)。
  • Yarn 2のサポート(experimental)。.yarnrc.ymlファイルにnodeLinker: node-modulesを手動で設定しなければならない点に注意。
  • webpack-dev-serverの問題を修正(#2898

breaking changes

  • webpackのコンフィグがシンプルになる
  • 統合インストーラが削除される
  • Splitchunks がデフォルトで有効に
  • extract_cssがデフォルトで有効に
  • オプショナルのCSSサポート

Webpacker 6.0アップグレードガイドより

6.0アップグレードガイドには、以下のようにさまざまな変更が記載されています。


設定ファイル v5 v6
config/webpacker.yml source_path: app/javascript source_path: app/packs
config/webpacker.yml source_entry_path: packs source_entry_path: entrypoints

app/javascript/packsディレクトリもapp/packs/entrypointsに変えることになります。


以下の既存の設定ファイルやディレクトリの内容が変更されるので、アップグレード時に一時的にリネームが必要です。

  • config/webpack/(ディレクトリ)
  • config/webpacker.yml(ファイル)

v5の以下のメソッドはv6で置き換えが必要です。

v5 v6
javascript_packs_with_chunks_tag javascript_pack_tag
stylesheet_packs_with_chunks_tag stylesheet_pack_tag

CSSやReactやTypeScriptの6.0でのインテグレーション方法については以下を参照。


従来のconfig/webpack/environment.jsはconfig/webpack/base.jsに変わります。これに伴い、environmentをbase.jsではwebpackConfigに置き換えます。

// config/webpack/base.js
const { webpackConfig, merge } = require('@rails/webpacker')
const customConfig = require('./custom')

module.exports = merge(webpackConfig, customConfig)

.browserlistrcファイルが存在する場合は"browserlist"キーをpackage.jsonに転記して.browserlistrcを削除します(ちなみに.browserlistrcが残っているとエラーになりました)。


webpacker.ymlからextensions項目が削除されます。既存のextensionsをカスタマイズした場合は以下のようにresolveの下に移転する必要があります。詳しくはWebpackの設定を参照。

{
  resolve: {
      extensions: ['.ts', '.tsx']
  }
}

関連記事

Rails: Webpacker 5.1.0でcheck_yarn_integrityオプションが廃止された

【保存版】Rails 5 Webpacker公式ドキュメントの歩き方+追加情報


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。