-ao- ramune blog

©2019 unio / GO2直営からふるラムネ

はじめてのSymfony4 + Vue.js

Webpack Encoreの導入

2018年07月04日 (更新:2019年07月30日)
  • 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 を実行してください。

package.json
                
                    {
                        "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 ...
                    ...
                
            
エイリアス 説明
dev-server 開発用のサーバを http://localhost:8080/ で立ち上げます。
デフォルトでは public がルートディレクトリです。
--hot オプションを付けて実行すると、HMRモードで起動しますが、v0.20.1時点ではVueのみ対応しています。
dev dev環境でビルドを行います。
各ライブラリのデバッグメッセージが有効になったりと、 開発時に便利な状態でビルドされます。
watch dev環境のビルド + ファイル更新をウォッチします。
変更があるたびにビルドが走ります。
build production環境でビルドします。
各種Minifyの実行やデバッグモード無効化などが適用されるので、 本番環境にデプロイするのはこちらです。

webpack.config.jsの確認

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

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();
                
            
プロフィール画像
なかのひと:unio

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

Twitter GitHub
[広告]