-ao- ramune blog

はじめてのSymfony4 + Vue.js

Webpack Encoreの導入

• PHP
• Symfony4
• Vue

Symfony4のアセット管理

Symfony4からAsseticは廃止され、 Webpack Encoreが標準のアセット管理ツールになりました。 Webpack Encoreはwebpackのヘルパーツールで、 webpackで煩雑になりがちな設定を簡潔に書ける強力なAPIが用意されています。 ちなみにwebpackはSymfonyと何ら関係なく、JavaScriptやCSS、画像といった様々なファイルをパッケージするモジュールバンドラです。

yarnのインストール

本チュートリアルでは、 公式 でも推奨しているyarnを利用したパッケージの管理を行います。 すでにNode.jsを利用している場合は、都度npmコマンドに読み替えながら進めてください。

yarnのインストールはOS毎に異なるため、公式サイトで確認してください。 下記は、Ubuntuでインストールする場合のコマンドです。

                
                    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
                    echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
                    sudo apt update && sudo apt install -y yarn
                
            

yarnを使ったパッケージインストール

さっそくyarnを使ってパッケージをインストールしてみましょう。 ためしに、今回のチュートリアルの目的でもあるVue.jsをインストールします。

                
                    yarn add --dev vue
                
            

vueパッケージをaddするとpackage.jsonは下記のようになります。 Symfony4.1.1時点でpackage.jsonに設定されているwebpack-encoreが古いため、 0.20.1 にバージョンアップしています。 もしpackage.jsonを直接書き換えてバージョンアップする場合は、書き換え後に yarn install を実行してください。

                
                    {
                        "devDependencies": {
                            "@symfony/webpack-encore": "^0.20.1",
                            "vue": "^2.5.16"
                        },
                        "license": "UNLICENSED",
                        "private": true,
                        "scripts": {
                            "dev-server": "encore dev-server",
                            "dev": "encore dev",
                            "watch": "encore dev --watch",
                            "build": "encore production"
                        }
                    }
                
            

package.jsonの各種項目の詳細は 公式サイト でご確認頂くとして、実際の開発で利用する scripts について説明します。 scriptsはデフォルトでWebpack Encore用のコマンドエイリアスが用意されており、それぞれ yarn run [alias] で実行します。

                
                    yarn run watch
                    yarn run v1.9.2
                    $ encore dev --watch
                    Running webpack ...
                    ...
                
            

webpack.config.jsの確認

Webpack Encoreは通常のwebpackと異なり、 Encore に対して各種設定を行うのがポイントとなります。 後ほどのチュートリアルで、実際にWebページを作成しながら解説します。

                
                    var Encore = require('@symfony/webpack-encore');

                    Encore
                        // the project directory where compiled assets will be stored
                        .setOutputPath('public/build/')
                        // the public path used by the web server to access the previous directory
                        .setPublicPath('/build')
                        .cleanupOutputBeforeBuild()
                        .enableSourceMaps(!Encore.isProduction())
                        // uncomment to create hashed filenames (e.g. app.abc123.css)
                        // .enableVersioning(Encore.isProduction())

                        // uncomment to define the assets of the project
                        // .addEntry('js/app', './assets/js/app.js')
                        // .addStyleEntry('css/app', './assets/css/app.scss')

                        // uncomment if you use Sass/SCSS files
                        // .enableSassLoader()

                        // uncomment for legacy applications that require $/jQuery as a global variable
                        // .autoProvidejQuery()
                    ;

                    module.exports = Encore.getWebpackConfig();