はじめてのSymfony4 + Vue.js

2. Webpack Encore

2018年07月04日 (更新: 2018年07月30日) by unio

前回作成したSymfony4のプロジェクトにVue.jsを導入します。 なお詳しいセットアップについては、公式サイトをご覧ください。

Symfony4のアセット管理

Symfony4からAsseticは廃止され、 CSSやJavascriptの管理にWebpack Encoreがバンドルされるようになりました。 webpackはJavascriptやCSS、画像といった様々なアセットを管理・パッケージするためのツールです。 Webpack Encoreはwebpackをシンプルに使えるようにするためのラッパーAPIがいくつか用意されており、 webpackで煩雑になりがちな設定を簡潔に書けるようになります。 Symfony製ですが、PHPフレームワーク側にはまったく依存していないので、他のフレームワークでも利用できます。

なお、今回のチュートリアルではwebpackについての詳細な解説は行わないため、詳しく知りたい方は公式ドキュメントをご覧ください。

yarnのインストール

本チュートリアルでは、Symfonyでも推奨している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
            
        

Vue.jsのインストール

yarn add --devで、Vue.jsをインストールします。 チュートリアルが進むにつれて追加するパッケージも出てきますが、一旦はvueのみ追加します。
            
                yarn add --dev vue
            
        
vueパッケージをaddするとpackage.jsonは下記のようになります。 今回はデフォルトのpackage.jsonに記載されているwebpack-encoreが古いため、^0.20.1に書き換えています。 書き換えた場合は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"
                    }
                }
            
        
scriptsにはデフォルトでwebpack-encore用の各種コマンドエイリアスが記載されています。 それぞれyarn run [alias]で動かすことができます。
            
                yarn run watch
                yarn run v1.9.2
                $ encore dev --watch
                Running webpack ...
                ...
            
        

webpack.config.jsの確認

symfony/website-skeletonは、 デフォルトで下記のwebpack.config.jsが配置されています。
            
                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();
            
        
通常のwebpack設定と異なり、Encoreに対して各種設定を行うのがポイントとなります。 具体的な設定は、後ほどのチュートリアルで実際にWebページを作成しながら解説します。