0

I'm new with webpack (more used to grunt) and Symfony 4. I'm trying to add a simple js file for now.

I made a simple js file there

//assets/js/slide.js
function test(){
    alert('test include');
}

A very basic twig to test the include works

{% block body %}
    <h1 onclick="test();">Slides</h1>

{% endblock %}

In webpack.config.js I add this

.setOutputPath('public/build/')

.addEntry('js/app', [
    './assets/js/app.js',
    './node_modules/jquery/dist/jquery.slim.js',
    './node_modules/popper.js/dist/popper.min.js',
    './node_modules/bootstrap/dist/js/bootstrap.min.js',
    './node_modules/holderjs/holder.min.js',
    './assets/js/slide.js'
])

Then I run ./node_modules/.bin/encore dev

And I can see the function test is well generated into the app.js file.

But when I test to trigger the event:

Uncaught ReferenceError: test is not defined at 
HTMLHeadingElement.onclick (slides:68) onclick @ slides:68

Then I think I am missing something here. That's for the simple question.

In fact; I have a full plugin to add (Reveal.js) which is there and has multiple folder that I need to keep, such as plugin / js / css: https://github.com/hakimel/reveal.js/#installation

How should I do that?

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Minirock
  • 628
  • 3
  • 13
  • 28
  • 1) This won't work this way 2) this has nothing to do with symfony or encore 3) this is basic JS 4) learn Webpack, specifically how it bundles and why global scope is bad – Mike Doe Dec 19 '18 at 14:03
  • I don't understand what are you saying: point 2 : `var Encore = require('@symfony/webpack-encore');` – Minirock Dec 19 '18 at 14:06
  • If I don't know how to drive a nail that doesn't mean the hammer is broken. I mean Symfony and Encore are used, and are working correctly, it's you who is writing broken JS code. – Mike Doe Dec 19 '18 at 14:08
  • I'm trying to follow this: https://symfony.com/doc/current/frontend/encore/simple-example.html#page-specific-javascript-or-css-multiple-entries – Minirock Dec 19 '18 at 14:09
  • Like I already said, learn Webpack, not Encore. Encore is just a tool to get Webpack up and running easily. – Mike Doe Dec 19 '18 at 14:09
  • See https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack – Mike Doe Dec 19 '18 at 14:22

0 Answers0