My question is simple I have a f.js file containing :
function f(x) {
return x
}
and a main.js file calling f(1) for example in an alert :
alert(f(1))
How to configure Webpack Encore in Symfony to make work this dependency between these two files, in other words how to make f defined in main.js ?
Inside webpack.config.js file, you define scripts and styles to build:
.addEntry('script', 'script_to_compile.js')
.addEntry('script2', ...)
This will generate a script.js and script2.js.
It's more common now, to have a single javascript file to download. From a script, to include other Javascript (and CSS!), use webpack module concept: https://webpack.js.org/concepts/modules/
Example, "I want to use pickaday library":
const Pikaday = require('pikaday/pikaday');
require('pikaday/scss/pikaday.scss');
$('.picker-date').each(function()
{
const $element = $(this);
new Pikaday({
field: $element.find('input')[0]
});
....
(you can see I can include a .scss style as well). Same thing for image, use require('toto.png') to let webpack know you want this image in the build (then use Symfony asset Twig function to use it).
import/export.ìmportandexport, but now how to import functions from a library ? I want to importBloodhoundfrom typeahead.bundle.js but I got this error : TypeError: setting getter-only property "Bloodhound", and it works without Webpack.Bloodhound = require('./typeahead.bundle');in the js file in which I want to call the function.