BLOGブログ

Symfony5でWebpackを使う

今日は、Webアプリのフロントエンドで使う各種パッケージをWebpackで管理できるようにしたいと思います。

Webpackとは?

Webpackの公式サイト:https://webpack.js.org/

「Webpack」は、Webアプリが必要とするフロントエンドの依存ファイルを1つのファイルにまとめてくれるので、HTTP/1.1を利用する際には、リクエス数が少くでき、結果Webアプリとしてのレスポンスが早くなる、ほか、SASSのコンパルなんかもできます。なんか、ピンとこないですよね。。 なので、まずは、入れて触るのがよさそうです。

Webpack Encoreバンドル

Webpack Encoreバンドルのマニュアル:https://symfony.com/doc/current/frontend.html

Symfonyには「Webpack」を利用するための、「Webpack Encore」というSymfonyバンドルがあり、このバンドルを利用してWebpackを入れます。

Webアプリの開発って複雑にですよね。 例えば、「Bootstrap4」を「Webpack Encore」で使いたいとなると 「Bootstrap4」→「Webpack Encore」→「Webpack」→「Yarn」→「npm」→「Node.js」まで調べることになりますから。

今回はこの「Yarn」まで入っている前提で進めます。

Encoreのインストール

まず、Composerで「Webpack Encore」をインストールをします。

$ composer require symfony/webpack-encore-bundle

上記でPHPの依存ファイルと一緒にJavaScriptの依存ファイルを入れてくれます。

上記で追加される、「package.json」は、Webアプリが利用するnpmパッケージ(JavaScriptパッケージ)を管理するために利用します。 具体的には、この後、「yarn」コマンドでnpmパッケージを追加する際に使います。Composerにおける「composer.json」のような役割をします。

package.json

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.30.0",
        "core-js": "^3.0.0",
        "regenerator-runtime": "^0.13.2",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}

また、.gitignoreに追加された無視されるディレクトリも見ておきましょう。 「/node_modules/」には「yarn」コマンドで追加されるnpmパッケージの依存ファイルが配置されます。 Composerの「/Vender」ディレクトリと同様に、Composerで入れると自動でGit管理からは外してくれます。

.gitignore

###> symfony/webpack-encore-bundle ###
/node_modules/
/public/build/
npm-debug.log
yarn-error.log
###< symfony/webpack-encore-bundle ###

npmの依存ファイルをインストール

「package.json」に記載されている依存ファイルを「yarn」でインストールします。

$ yarn install

上記コマンドで、npmの依存ファイルが「node_modules/」に追加されます。

$ ll node_modules/
total 148
drwxrwxrwx 1 morihara morihara   4096 Aug 24 21:26  ./
drwxrwxrwx 1 morihara morihara   4096 Aug 24 21:26  ../
drwxrwxrwx 1 morihara morihara   4096 Aug 24 21:26  .bin/
-rwxrwxrwx 1 morihara morihara 151498 Aug 24 21:26  .yarn-integrity*
drwxrwxrwx 1 morihara morihara   4096 Aug 24 21:25 '@babel'/
drwxrwxrwx 1 morihara morihara   4096 Aug 24 21:25 '@symfony'/
drwxrwxrwx 1 morihara morihara   4096 Aug 24 21:25 '@types'/
drwxrwxrwx 1 morihara morihara   4096 Aug 24 21:25 '@webassemblyjs'/
drwxrwxrwx 1 morihara morihara   4096 Aug 24 21:25 '@xtuc'/
drwxrwxrwx 1 morihara morihara   4096 Aug 24 21:26  accepts/
drwxrwxrwx 1 morihara morihara   4096 Aug 24 21:26  acorn/
drwxrwxrwx 1 morihara morihara   4096 Aug 24 21:26  adjust-sourcemap-loader/
drwxrwxrwx 1 morihara morihara   4096 Aug 24 21:26  ajv/
....

追加された依存ファイルは「yarn.lock」に記録されます。

「Webpack Encore」を使ってみる

さて、「Webpack Encore」を使う用意ができましたので、使っていきます。 何をしてくれるかというと、エントリーポイントというファイルを1つ指定すると、そのファイルから芋ずる式に関連ファイル(.js、.css)を 引っ張りだして、コンパイルし、1つのJSファイル、1つのCSSファイルにまとめてくれます。(これの何がうれしいかはさておき、、)

コンパイルするファイルは以下になります。

$ tree assets/
assets/
├── css
│   └── app.css
└── js
    └── app.js

コンパイルする対象の指定を含め「Webpack Encore」の挙動設定は「webpack.config.js」に記載されています。

webpack.config.js

...
Encore

    // コンパイルされたjsやcssファイルを配置する場所。
    .setOutputPath('public/build/')

    // DocumentRootから見たPATH
    .setPublicPath('/build')

    // 最終的に出力されるファイルの名称と、エントリーファイルの場所。
    // この場合出力されるファイル名は「app.js」と「app.css」となる
    .addEntry('app', './assets/js/app.js')
...

エントリーファイルである「assets/js/app.js」は、その内部で「app.css」をインポートしており、このインポート先もコンパイルの対象となります。

assets/js/app.js

// app.cssを読み込み
import '../css/app.css';

// 動作確認用のメッセージ
console.log('Hello Webpack Encore! Edit me in assets/js/app.js');

app.cssは、背景色を「ライトグレー」にする指定のみ記述されています。

assets/css/app.css

body {
    background-color: lightgray;
}

では、「yarn」コマンドで「Webpack Encore」でコンパイルしてみます。

$ yarn encore dev

yarn run v1.22.4
$ /mnt/c/Users/morihara/Documents/works/test/webapp/node_modules/.bin/encore dev
Running webpack ...

 DONE  Compiled successfully in 5282ms       10:11:04 PM

 I  3 files written to public/build
Entrypoint app = runtime.js app.css app.js
Done in 12.84s.

コンパイル前後のファイルの違い

コンパイル前

$ tree public/
public/
└── index.php

コンパイル後

$ tree public/
public/
├── build
│   ├── app.css <--- appエントリに関するすべてのCSS
│   ├── app.js  <--- appエントリに関するすべてのJavaScript
│   ├── entrypoints.json
│   ├── manifest.json
│   └── runtime.js
└── index.php

「build/」ディレクトリが作成され、その中にコンパイルされたファイルがに配置されます。

Twigテンプレートで読み込み

コンパイルされたJSとCSSファイルををTwigで読み込みます。読み込むためのTwig関数も用意されています。

<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8">
         <title>{% block title %}Welcome!{% endblock %}</title>
-        {% block stylesheets %}{% endblock %}
+        {% block stylesheets %}
+            {{ encore_entry_link_tags('app') }}
+        {% endblock %}
     </head>
     <body>
         {% block body %}{% endblock %}
-        {% block javascripts %}{% endblock %}
+        {% block javascripts %}
+            {{ encore_entry_script_tags('app') }}
+        {% endblock %}
     </body>
 </html>

あとは適当にページを作って、表示してみてください。

$ bin/console make:controller

 Choose a name for your controller class (e.g. DeliciousKangarooController):
 > SampleController

 created: src/Controller/SampleController.php
 created: templates/sample/index.html.twig


  Success!

画面の背景がグレーで、JavaScriptのコンソールに「Hello Webpack Encore! Edit me in assets/js/app.js」とメッセージが表示されれば成功です。

次回ですが、この「Webpack Encore」で「Bootstrap4」を入れたいと思います。

この記事を書いたブログライター:ヒロシ

ヒロシです。
丸善印刷でWebのお仕事をしています。
趣味は英語で、今年はオンライ英会話を試してみようと思います!

この記事を書いたブログライター:ヒロシ

ヒロシです。
丸善印刷でWebのお仕事をしています。
趣味は英語で、今年はオンライ英会話を試してみようと思います!