If You look at the application layout, the link to app.js is at the very end… which is usual for better loading performance. But the template are defined above, so they don’t know about $, because it will be defined later.

One solution I use is to put a placeholder for script just after loading app.js, like this…

<script type="text/javascript" src="<%= Routes.static_url(@conn, "/js/app.js") %>"></script>
<%= render_existing @view_module, "scripts.html", assigns %>

And in the corresponding view, I put

  def render("scripts.html", _assigns) do
    ~E(<script src="/js/page_tree.js"></script>)
  end

Scripts loaded this way have access to $.

But if You want to put javascript code inside template, You would probably need another solution.

It is not tested, but I think I would do it this way…

• Split bundle in vendor.js and app.js, putting jquery and related into vendor.
• Load vendor before rendering template.

By the way I use provide plugin in webpack config to load jquery.

    new Webpack.ProvidePlugin({ // inject ES5 modules as global vars
      $: 'jquery',
      jQuery: 'jquery', 'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default']
    })

PS. One quick test would be to move the loading of app.js before rendering template…

I put this file under /assets/static/js/

This way it will copied automatically to priv… (by CopyWebpackPlugin)

new CopyWebpackPlugin([{ from: 'static/', to: './' }]),

I don’t need to declare page_tree.js in webpack, but if it is declared after app.js, it will benefit of all the stuff You loaded in app.js.

PS. You can also define multiple entries in webpack.config.js, and use [name].js as output… This would bundle any js through webpack.

For note, at least Chrome (and I think Firefox and Edge too) all define $ if not otherwise defined and it works like a selector query from jQuery, a convenient helper.

To see if $ is actually defined, test is on window.$ instead.