Symfony + Webpack Encore 0.21.0 (Webpack 4) で Asset Versioning & Hot Module Replacement

Webpack Encore が 0.21.0 になり、Webpack 4 に対応しました。生成したファイルの埋め込みは asset() ではなく専用の関数を使うことで、バージョニングや SplitChunks で分割されたファイルにも対応するようになりました。

参考

• Encore 0.21.0: Webpack 4 Support, Copy Files Support, WebpackEncoreBundle
• Encore Installation (without Symfony Flex)
• Encore: Setting up your Project

手順

アセットビルド設定

Webpack Encore は 0.21.0 以降をインストールする。(依存関係により Webpack 4 がインストールされる。)

$ yarn add --dev @symfony/webpack-encore@^0.21.0

必要なローダーをインストールする。

$ yarn add --dev node-sass sass-loader typescript ts-loader

webpack.config.js を設定する。(例)

const Encore = require('@symfony/webpack-encore');
Encore
    .setOutputPath('web/build/')
    .setPublicPath('/build')
    .setManifestKeyPrefix('build/')
    .addEntry('app', ['./assets/js/app.ts', './assets/css/app.scss'])
    .enableTypeScriptLoader()
    .enableSassLoader()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .enableSingleRuntimeChunk()
    .splitEntryChunks()
;
module.exports = Encore.getWebpackConfig();

packages.json に追記

{
    "scripts": {
        "build": "encore"
    }
}

ビルドする

$ yarn encore dev

プロダクションビルド

$ yarn encore production

HMR

$ yarn encore dev-server --hot

HTMLに埋め込む

Webpack Encore Bundle をインストールする。

$ composer require symfony/webpack-encore-bundle

app/AppKernel.php にバンドルを追加し、有効化する。

class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = array(
            (略)
            new Symfony\WebpackEncoreBundle\WebpackEncoreBundle(),
        );
    }
}

app/config/config.yml に Webpack でビルドされたパスを指定してあげる。

webpack_encore:
    output_path: '%kernel.project_dir%/web/build'

Twig テンプレートに以下のように記述することで、ビルドされたファイル名が自動的に入ります。

{% block stylesheets %}
   {{ encore_entry_link_tags('app') }}
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
{% endblock %}