webpack-encore-bundleアップデート大作戦
Webpack Encoreがついに
それと同時にwebpack-encore-bundleが追加されたのですが、導入で色々とゴニョったので記録を残しておきます。
古いSymfonyパッケージ群のバージョンアップ
最新の symfony/website-skeleton/composer.json を見ながら、新しいパッケージ構成に直します（執筆時点のmasterはSymfony4.2）。 バージョン指定がいくつかアスタリスクになっていたので、一応合わせます。 （アスタリスク指定は結構アグレシッブですが、今後うまいこと互換性を保つ感じなんでしょうか。）
webpack-encore-bundleの導入
次はwebpack-encore-bundleを追加して、symfony/webpack-encore-packにおさらばします。
コンソールコマンド
php composer.phar require symfony/webpack-encore-bundle
php composer.phar remove symfony/webpack-encore-pack
webpack-encoreのバージョンアップ
ここからcomposerではなく、npmのパッケージを更新します。 Symfony Flex レシピのpackage.jsonを参考に、webpack-encoreのバージョンアップとwebpack-notifierを追加します。
package.json
{
...
"devDependencies": {
"@symfony/webpack-encore": "^0.22.1",
"webpack-notifier": "^1.6.0",
...
},
...
}
package.jsonを修正したらyarn installを実行します。
コンソールコマンド
yarn install
yarn install v1.12.3
info No lockfile found.
[1/4] Resolving packages...
warning css-loader > cssnano > autoprefixer > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning css-loader > cssnano > postcss-merge-rules > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning css-loader > cssnano > postcss-merge-rules > caniuse-api > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 70.74s.
webpack3系でロックしていたloader系のwarningがいくつか出ましたが、一応successです。
loader系パッケージのバージョンアップ
ここまでで、ためしにyarn encore devを実行すると、loader系パッケージでエラーが出てしまいます。
コンソールコマンド
yarn encore dev
yarn run v1.12.3
$ /home/unio/workspace/karafuru-ramune/node_modules/.bin/encore dev --watch
Running webpack ...
WARNING Webpack Encore requires version ^3.0.0 of postcss-loader, but your version (2.1.6) is too old. The related feature will probably *not* work correctly.
WARNING Webpack Encore requires version ^3.0.0 of postcss-loader, but your version (2.1.6) is too old. The related feature will probably *not* work correctly.
WARNING Webpack Encore requires version ^15.0.11 of vue-loader, but your version (14.2.3) is too old. The related feature will probably *not* work correctly.
Error: Cannot find module 'vue-loader/lib/plugin'
...
webpackのloader系パッケージをwarningが出なくなるまで、こつこつとバージョンアップします。 例えばcss-loaderのバージョンが古いと、下記のような警告が出ます。
warning css-loader > cssnano > autoprefixer > browserslist@1.7.7:
Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
Babelのバージョンアップ
webpack4になったので、Babelも7に上げます。 導入していた古いbabelパッケージをremoveして、7系を新しくaddします。
yarn remove babel-preset-env babel-plugin-transform-object-rest-spread
yarn add @babel/core @babel/preset-env --dev
インストール中にキャッシュの警告が出る場合は、node_modulesを削除してクリーンインストールします。
コンソールコマンド
warning Pattern ["@babel/core@^7.1.6"] is trying to unpack in the same destination
"/home/unio/.cache/yarn/v4/npm-@babel-core-7.1.6-3733cbee4317429bc87c62b29cf8587dba7baeb3/node_modules/@babel/core" as pattern ["@babel/core@^7.0.0"].
This could result in non-deterministic behavior, skipping.
...
rm -rf node_modules
yarn install
最後の仕上げ
yarn encore devを実行するとビルドには成功しますが、いくつか警告が出ます。
DEPRECATION Either the Encore.enableSingleRuntimeChunk() or Encore.disableSingleRuntimeChunk() method should be called.
DEPRECATION The recommended setting is Encore.enableSingleRuntimeChunk().
DEPRECATION After calling Encore.enableSingleRuntimeChunk(), a new "runtime.js" will be output and should be included on your page before any other script tags for Encore files.
警告に従って、webpack.config.jsにdisableSingleRuntimeChunk()を設定します。 これで一旦は旧encoreと同じように動作します。 ここからenableSingleRuntimeChunk()を有効にしてtwigのencore用関数を使ったりしますが、 詳しくは公式サイトをご覧ください。
まとめ
webpack-encore-bundleの登場で、Symfonyのフロントエンド開発が更に便利になりました。 逆に言えばフロントエンドとのベッタリ度合いが高まったとも言えるので、これを期にEncoreを捨ててしまうのも一手です。