On the Delicious Brains site they've posted the latest part in their "Develop[ing] a WordPress Plugin Using Webpack 3, React and the REST API" series. This is part two of the series, building on the foundation set up in part one of the series. In this second part more work is put into the Webpack setup, the creation of the REST API and the React frontend.

Have you ever wondered how to get React working with the WordPress REST API? If so you’re in the right place – that’s what we’re going to cover in this follow-up to part one of how to develop a WordPress plugin! In our previous post, we explained what Webpack is and got it integrated into our WordPress sample plugin. We also got BrowserSync set up and reloading our app. In this part we’re going to look at how to get the React side of our plugin working with the WordPress REST API so that the plugin actually does something cool.

The tutorial starts with the Webpack changes, mostly configuration updates adding in additional plugins. Next comes the changes for the REST API and working with it to get information from the WordPress backend. After showing you how to test that the API is working as expected they move along to the React changes on the frontend and using components to split up the logic and make it easier to maintain.

The Symfony Finland site has an article posted introducing you to Symfony Encore, a tool that makes it simpler to manage frontend libraries and dependencies via Webpack.

Symfony Encore is a wrapper for the JavaScript module bundler Webpack. Webpack is used to manage Front End assets like JavaScript, CSS and image for browser consumption, often with conversion step from a source format like SASS. Encore provides an opinionated way to add Webpack to your Symfony projects.

[...] Earlier this year I experimented with sharing a state object with Symfony and different front end tools. Recently I ported the Symfony 3 application to Symfony Flex. Now I will continue the evolution of the app by adopting Symfony Encore to the project.

The article briefly introduces Encore and what functionality it provides before getting to the installation (via yarn) and configuration that it installs by default. The post then goes through the setup of SASS, using assets in your pages and running builds.

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.

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.

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.