こんにちは、hachi8833です。
以下の記事を翻訳しようと思って動作確認するうちにWebpacker 6.0の開発が進められていることに気づいたので、変更点がどのぐらいあるかをとりあえずメモしてみました。Webpacker 5.0からの変更点、割と多い...😅。
Webpacker 6.0が正式にリリースされたら試してみようと思います。
Webpacker 6.0は現在beta.6
本記事執筆時点では、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に設定される。また、デフォルトのapplicationpackに代えて個別の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']
}
}
注
本記事の内容は流動的であり、Webpacker 6.0のリリースまでに変わる可能性があります。