Integrate Webpack in your Symfony application with Webpack Encore
First of all, I want to mention that this is my first article in English. I’m francophone (from Benin), so be indulgent for typos! 🙄
« Symfony is a set of PHP Components, a Web Application framework, a Philosophy, and a Community — all working together in harmony. » . This is my favourite PHP Framework because Symfony provide lot of components like bundles and Symfony community is a great one!
Asset Management in Symfony is handled with the PHP based library Assetic. Sensiolabs, Symfony’s creator introduced Encore, new asset management tools which use Webpack. So what is Webpack?
- A better build caching;
- Better TypeScript experience
- Improve User Experience
- Live developement server
- And more stuff
Okay, let’s code !
Let’s scaffolding new project!
$ symfony new symfony-webpack
$ cd symfony-webpack
Symfony was successfully installed and you can use GIT for versionning tools. Now, we’re going to start your symfony development server.
$ php bin/console server:start
Now open your browser on http://127.0.0.1:8000.
Then, install Encore into your project with Yarn with:
$ yarn add @symfony/webpack-encore --dev
$ yarn add sass-loader node-sass --dev
😌 Now, open your project with your favourite editor or EDI.
Compile your resource files with the command:
.$ /node_modules/.bin/encore dev
You will get a nice webpack message: DONE Compiled successfully in … ms. But as the above command is a bit long to type add scripts in our package.json file
"dev": "./node_modules/.bin/encore dev"
You can now compile your files with the command:
$ npm run dev
We’ll add an option to recompile our resources automatically when they’re changed.
"dev": "./node_modules/.bin/encore dev --watch"
Voila! You can harness the power of webpack in your Symfony project. Just insert the links to the available resource files in the symfony-webpack/web/build folder.
I created a small application that uses Webpack Encore and redirectjs library available on my github repository.