Looking for more information on how to do PHP the right way? Check out PHP: The Right Way

Symfony Blog:
Introducing Webpack Encore for Asset Management
Jun 13, 2017 @ 11:08:19

On the Symfony blog they've released an announcement about the release of a tool that wants to help make it easier for Symfony developers to work with frontend resources using the Webpack standard: Webpack Encore.

For everyone that has hit [the barrier of complexity in frontend dependencies and compilation], I'm very excited to show you something we've been working on for the last few months: Webpack Encore.

Encore gives you powerful CSS and JavaScript processing, combination, minification and a lot more, wrapped up in a simple API that's built on an industry-standard tool (Webpack).

He includes an example of the Javascript configuration to build out the Javascript, CSS and dependencies required for his build. He talks briefly about the conformity to the Webpack handling and how Encore fills that role in Symfony applications. The post ends linking to the project repository and the changes required to get the package installed.

tagged: webpack symfony encore library configuration frontend library dependency tool

Link: http://symfony.com/blog/introducing-webpack-encore-for-asset-management

SitePoint PHP Blog:
How to Use Laravel Mix in Non-Laravel Projects
May 24, 2017 @ 12:06:28

The SitePoint PHP blog has posted a new tutorial for those developers out there that like the idea of the Laravel Mix functionality for defining Webpack builds but aren't using the rest of the framework for their application.

If you, like me, just want to get up and running on a project as quickly as possible, you probably don’t want to spend time configuring build tools like Webpack. Laravel Mix solves this problem, and makes asset compiling incredibly easy, but what if you want to use it on a non-Laravel project? This article shows you how to accomplish that.

[...] Laravel Mix, formerly Elixir, could be defined as an API wrapper for Webpack. It has a fluent syntax and is generally easy to use. Setting up versioning, hot reloading, and asset building/compiling is a breeze and requires only a single configuration file and a few lines of code.

The post starts off with the requirements you'll need to create the build - besides the Mix code, naturally (NPM and Node). He includes the commands to get the required packages installed and how to create the initial Webpack "mix" file. They then add a few packages to be installed, create assets to be compiled and run the tool to perform the actual build. There's also a section about "cache busting" and, finally, setting up a local index file to test out the result. The tutorial ends with a few other helpful commands you might want to use during your development.

tagged: laravel mix webpack tutorial framework npm node example

Link: https://www.sitepoint.com/use-laravel-mix-non-laravel-projects/

Benjamin Eberlei:
Integrate Symfony and Webpack
Feb 26, 2015 @ 10:21:40

In his latest entry Benjamin Eberlei shows how he integrated Symfony and Webpack, a tool that makes it simpler to package up multiple assets (like Javascript or CSS files) and reduce them down to combined files, reducing the overhead on page loads.

Asset Management in Symfony2 is handled with the PHP based library Assetic by default, however I have never really connected to this library and at least for me it usually wastes more time than it saves. [...] While researching about React.JS I came across a tool called Webpack which you could compare to Symfony’s Assetic. It is primarily focussing on bundling Javascript modules, but you can also ship CSS assets with it.

He talks about some of the main benefits to using the Webpack tool including a built-in web server to serve up the assets and a "hot reload" plugin that refreshes when assets change. He then gets into a more practical example, showing how the tool works with a typical asset structure in a Symfony application. He shows how it uses the internal server to prevent the need for a complete rebuild each time. He also shows how to install and configure it through Symfony and loading the Javascript file in your Twig template. Finally he shows how to run a build, the resulting output and the integration he mentioned with React.js.

tagged: symfony asset webpack tool tutorial introduction configuration install

Link: http://www.whitewashing.de/2015/02/26/integrate_symfony_and_webpack.html