Search code examples
javascriptwebpackhtml-webpack-plugin

webpack: How to inject the JS chunks in the a YAML file

I'm using webpack to modernize a legacy MVC application (symfony 1.4)

I would like to inject the JS chunks and the CSS file in a YAML file that contains several other settings.

Here is an example:

default:
   foo: bar
   .
   .
   stylesheets: [ style.db80006f5e14f38456ef.css ]
   javascripts: [ runtime.d8969ec83f67a36c8877.js, npm.material.db07856eff6817abe7f2.js, main.db80006f5e14f38456ef.js ]
   .
   .

The html-webpack-plugin supports plugin as well. I was wondering if it would be possible with my own plugin for the html-webpack-plugin to inject the CSS files and JS files in a YAML file instead of an HTML template. I'm not sure if the html-webpack-plugin is the way to go since I don't want to manipulate an HTML file.

Maybe there is another possibility to get the names and the order of the JS chunks, plus the CSS file.

Thanks a lot in advance!

Solution

  • html-webpack-plugin is the way to go, you can provide your "base" yaml file as a template, and provide a templateContent function that will generate your yaml content.

    Something like this:

    new HtmlWebpackPlugin({
  templateContent: function(params) {
    return `
default:
   stylesheets: [ ${params.htmlWebpackPlugin.files.css.join(',')} ]
   javascripts: [ ${params.htmlWebpackPlugin.files.js.join(',')} ]
`;
  },
  filename: 'path-to/where/to/save/your.yaml',
  inject: false, // prevents from the plugin to auto-inject html tags
});