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

2018年11月23日 by unio PHP Symfony4

webpack-encoreがついにWebpack4に対応しました。 同時にwebpack-encore-bundleが追加されたので早速導入してみましたが、 色々とゴニョったので記録を残しておきます。

Symfonyパッケージ群のバージョンアップ

まずは今回を期にパッケージ構成を最新のスケルトンに合わせました。

参考にするのは symfony/website-skeletonのcomposer.json です(執筆時点のmasterはSymfony4.2です)。 jsonを比較しながらパッケージの整理と、バージョン指定がいくつかアスタリスクになっていたので書き換えます。 アスタリスク指定は結構アグレシッブなので、仕事ではおそらくキャレットでバージョン指定すると思います。

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のバージョンアップ

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
            
        
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.
インストール中にキャッシュの警告が出る場合は、node_modulesを削除してクリーンインストールしましょう。
            
                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を捨ててしまうのも一手です。 ちなみにwebpack-encore-bundleを捨てる際は、webpack.config.jsも一緒に消えてしまうので退避させるのを忘れずに。