Symfony4のフロントエンド環境構築

Symfony

ここを起点にしてドキュメントを追っかければ、ほぼほぼ大丈夫だと思う。
Managing CSS and JavaScript

まずは、Encoreをインストールする。
Encore Installation (Symfony Docs)

単純にJS・CSSを使うなら public/ に置いて読み込めばいいのだけど、Symfonyでイマドキのフロントエンド環境を構築したい場合はEncoreを使って準備していくと早い。
あと、パッケージマネージャはYarnを使っていることを前提にしてドキュメントが書かれているので、インストールしておくと良さそう。

$ composer require encore asset
$ yarn install

encoreだけじゃなくて、assetコンポーネントも入れておく。
入れておかないとテンプレートで asset() が使えない。

次は最低限のJSとCSSを用意してビルド・読み込みまでやっていく。
First Example (Symfony Docs)

まずは webpack.config.js の修正。
以下の箇所のコメントを外してエントリーポイントを指定する。

// .addEntry('js/app', './assets/js/app.js')
// .addStyleEntry('css/app', './assets/css/app.scss')
.addEntry('js/app', './assets/js/app.js')
.addStyleEntry('css/app', './assets/css/app.css')

CSSファイルの拡張子を変えているのは意図的で、Sassを使うつもりがないから。
assets/ に js/app.js と css/app.css を作成する。

ここまでできたら yarn run でビルド。

$ yarn run encore dev

圧縮したりソースマップをつけたくないなら以下のようにproductionを指定する。

$ yarn run encore production

すると public/build/ にビルドされたJSとCSSが生成されるので、それを読み込めば完了。

<head>
    <!-- ... -->
    <link rel="stylesheet" href="{{ asset('build/css/app.css') }}">
</head>
<body>
    <!-- ... -->
    <script src="{{ asset('build/js/app.js') }}"></script>
</body>

てな感じで、これで最低限。
本当に最低限すぎて、これだとEncore（Webpack）使わなくていいレベル。

これにPostCSSとかBabelとか入れていく。
記事が長くなるので別で書く。