create merged jsons at first

[gregorvoinov]

Hi,

Is it possible to create the merged jsons at first? Because I want to use it in combination with HtmlWebpackPlugin and templateParameters. If I use this line

templateParameters: require('./src/jsons/bundle.json')

I get the message

Error: Cannot find module './src/jsons/bundle.json'

Because the bundle has not been created yet

[tettusud]

@gregorvoinov I am not getting the issue, if you can use MergeJsonPlugin ahead of those, it should be available, if possible can you share your webpack.config.js file (in private also) should be fine

[gregorvoinov]

hi,

this is my webpack.config

If I start with

npm run dev  ("webpack --mode development --watch")

I get the error that no bundle.json was found, so it would be nice if there is a way to merge all jsons files before the HtmlWebpackPlugin runs.

[tettusud]

Could you try moving the MergeJson plugin up the stack and try? I mean place it at first

[gregorvoinov]

same result, if I place it at first.

[tettusud]

@gregorvoinov could you check if your output path is correct? 'output': { 'fileName': './../src/jsons/bundle.json' }

May be you can make it like ./src and run this plugin prior to HtmlWebpack and give a try?

[gregorvoinov]

The output path is correct. If I place an empty bundle.json at this location htmlWebpackPlugin find it and use it. There are no errors, and then your plugin creates the real .json bundle, but htmlWebpackPlugin already used the empty one. Maybe it has something todo with the compiler hooks and the htmlWebpackPlugin is running with the first one https://webpack.js.org/api/compiler-hooks/

[gregorvoinov]

maybe this can be a solution https://github.com/jantimon/html-webpack-plugin#events

so that your plugin can be called before creating the html files

compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration.tapAsync(
  'MyPlugin',
  (data, cb) => {
    //do something
  }
)

sorry for asking, but i have no idea about to write my own plugins, I'm more a screendesigner, with a great interest in frontend :)

[tettusud]

@gregorvoinov thank you very much for your amazing effort . I will fix it. Apologies for the delay.

[gregorvoinov]

sry for bothering you but found the solution ;) require was the problem, because if this file doesn't exist at the beginning an error will be thrown.

so the solution was to load the .json later with a small function

function loadJson (){
    return JSON.parse(fs.readFileSync('./src/data/merged.json', 'utf8'));
}

templateParameters: loadJson()