Webpack Encore can work as a standalone Javascript library with yarn add @symfony/webpack-encore
.
However, to dynamically load assets (runtime, vendors, versioned assets, ...),
you still need Symfony/Twig on the back-end part along with the webpack-encore-bundle.
So, here is a standalone PHP package to port asset()
, encore_entry_js_files()
, encore_entry_css_files()
, encore_entry_script_tags()
, encore_entry_link_tags()
functions
of Webpack Encore outside of Twig's scope, in a vanilla PHP project.
composer require bentools/webpack-encore-resolver
Consider this webpack.config.js
file:
const Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('main', './assets/js/main.js')
.enableVersioning(true)
// ...
;
module.exports = Encore.getWebpackConfig();
You can generate versioned assets tags the following way:
<?php
require_once __DIR__ . '/../vendor/autoload.php';
use function BenTools\WebpackEncoreResolver\encore_entry_link_tags;
use function BenTools\WebpackEncoreResolver\encore_entry_script_tags;
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<?php encore_entry_link_tags('main');?>
<?php encore_entry_script_tags('main');?>
<!-- ... -->
Alternative (for more control on your markup):
<?php
require_once __DIR__ . '/../vendor/autoload.php';
use function BenTools\WebpackEncoreResolver\asset;
use function BenTools\WebpackEncoreResolver\encore_entry_css_files;
use function BenTools\WebpackEncoreResolver\encore_entry_js_files;
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<?php foreach (encore_entry_css_files('main') as $resource): ?>
<link rel="stylesheet" href="<?=$resource?>">
<?php endforeach; ?>
<?php foreach (encore_entry_js_files('main') as $resource): ?>
<script src="<?=$resource?>"></script>
<?php endforeach; ?>
<!-- Or request a specific resource -->
<link rel="stylesheet" href="<?=asset('main.css')?>">
Multiple webpack configurations / multiple manifests aren't supported at the moment. PRs welcome!
./vendor/bin/phpunit
MIT.