-ao- ramune blog

©2021 unio / GO2直営からふるラムネ
2018年11月23日

webpack-encore-bundleアップデート大作戦

Webpack Encoreがついに

webpack4に対応しました。

それと同時に 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.jsdisableSingleRuntimeChunk() を設定します。 これで一旦は旧encoreと同じように動作します。 ここから enableSingleRuntimeChunk() を有効にしてtwigのencore用関数を使ったりしますが、 詳しくは公式サイトをご覧ください。

まとめ

webpack-encore-bundle の登場で、Symfonyのフロントエンド開発が更に便利になりました。 逆に言えばフロントエンドとのベッタリ度合いが高まったとも言えるので、これを期にEncoreを捨ててしまうのも一手です。

プロフィール画像
なかのひと:unio

数十年前の牧歌的なインターネッツが好きだった、永遠のモラトリアム人。 ただ、モラトリアムしててもお金は増えないので、しゃかいの厳しさを斜め後ろから眺めつつほそぼそと生活しています。

[広告]