Symfony Encore multiple asset manifests - symfony

Question

I have a question regarding Encore in Symfony 3.4 and asset versioning.
In my webpack.config.jsI have two configurations.
First is for JS files, the other one for compiling .less.
Each configuration is reset by Encore.reset()
Output bundles are generating manifest with versioning via .enableVersioning, so I have two manifest.json in
web/js/manifest.json
web/stylesheets/manifest.json
According to docs, to have my assets loaded via manifest I need to declare it in config.yml
assets:
base_path: "%myapp.http.site_assets_suffix%"
stylesheets:
json_manifest_path: "%kernel.project_dir%/web/assets/stylesheets/manifest.json"
If I want to link to style.css generated by webpack, I use
asset("stylesheets/style.css")
But in my application I have two manifests and I think this can't be changed due to two Encore configurations.
I've tried adding something in likes of
packages:
stylesheets:
json_manifest_path: "%kernel.project_dir%/web/assets/stylesheets/manifest.json"
js:
json_manifest_path: "%kernel.project_dir%/web/assets/js/manifest.json"
because I saw that somewhere, but unfortunately this won't work at all.
I've thought about combining two manifests into one in last webpack entry point, but this can be time consuming.
Is there any other solution than combining manfiests or combining js + less compilation into one big Encore task?

Answer 1

I've found a solution
assets:
base_path: 'path%'
packages:
noversion:
version: false
version_format: "%%1$s"
base_path: "path%"
stylesheets:
json_manifest_path: "%kernel.project_dir%/web/assets/stylesheets/manifest.json"
js:
json_manifest_path: "%kernel.project_dir%/web/assets/js/manifest.json"
admin:
json_manifest_path: "%kernel.project_dir%/web/assets/js/admin/manifest.json"
And then in .twig files, you need to call it as
<script src="{{ asset('assets/DIRNAME/WEBPACK_ENTRY_NAME_HERE', ASSET_PACKAGE_NAME_HERE) }}"></script>
In my case
<script src="{{ asset('assets/js/backend.js', 'js') }}"></script>
Where WEBPACK_ENTRY_NAME is the name of the Webpack/Encore bundle from webpack.config.js, in my case
.setOutputPath('./web/assets/js')
.setPublicPath('/assets/js')
.addEntry('backend',
Sorry for delayed answer, but I forgot about it.

Answer 2

Webpack Encore use webpack-manifest-plugin to generate manifest.json file.
According to the doc, you can specify an options.seed when you setup your config.
A cache of key/value pairs to used to seed the manifest. This may include a set of custom key/value pairs to include in your manifest, or may be used to combine manifests across compilations in multi-compiler mode. To combine manifests, pass a shared seed object to each compiler's ManifestPlugin instance.
Encore.configureManifestPlugin(options => {
let seed;
try {
// require your existing manifest content if exists
seed = require(path.join(outputPath, 'manifest.json'));
}
catch (e) {
// fallback if manifest.json is missing
seed = {};
}
// inject your latest config as seed.
// The plugin will update it and rewrite manifest.json with correct values (overwrite existing keys, append news)
options.seed = seed;
// Also i add a trick to avoid "License.txt" entries
options.generate = function(seed, files, entrypoints) {
// trick to avoid generate useless versionned entries like License
const filesWithoutLicense = files.filter(file => {
return file.path.match(/.*LICENSE.*/) === null;
});
const newManifestContent = filesWithoutLicense.reduce(
(newManifestContent, file) => {
newManifestContent[file.name] = file.path;
return newManifestContent;
},
seed
);
return newManifestContent;
}