Develop Reference

JS, WebPack, Not Dynamically Loading Images Using Phaser3 Beyond Preload Function For IO Game

My attempts at making an IO game is failing, as I can't dynamically load images after I have packed the game using WebPack (a hypothesis). When I lazy load any assets whether it be cross origin or local, it doesn't seem to load and render.
in index.js I have this in phaser's create():
this.load.image('arc_red', 'https://art.pixilart.com/187aec08b8014f7.gif');//testing with this
this.load.once('complete', ()=>{console.log('image loaded!')}, this);
this.load.start();
when I use the preload, it does work. But dynamically it does not. I've been searching for nearly a day straight without any luck.
question:
Is my assumption correct? And if it is, what is a way I can dynamically load images after WebPack has packed the files?

I'm no webpack expert (and depending on the webpack version), but if you are not using a webpack.config, the default behavior is that there should be:
webpack bundle files are placed into the ./dist folder. So to answer your question, any file that is not in this folder is not bundled with webpack
Except if they are "inlined" in the main.js, I think images are not be inlined automatically/without plugin, or atleast in the version I used to use.
dev-server offers an extra folder, where "static" files can be placed, it is ./public(https://webpack.js.org/configuration/dev-server/)
So all files that are served from the dev-server must be in on of those folders.
I would place the images/assets into that ./public folder, and than they should be visible.
Info: I tripped over this once, files placed in ./public folder are accessed, as if they would be in the ./dist folder.

Loading plugins in Webpack for a static website

I'm building a static website,
I have downloaded some template just get things started.
There are three main JS files in this template:
jquery.js
plugins.js
functions.js
They are loaded in the index.html file in that order.
I would like to use webpack for production.
I have created a new file: index.js and in that file, used require to load these files
require('jquery.js')
require('plugins.js')
require('functions.js')
This is not working because of probably scope issues, plugins.js for example doesn't know about jquery and so on.
I can move all the plugins from plugins.js to package.json and have it downloaded to node_modules and use it from there, but because it's a static website and just a FE to my app, I don't care much about updates to its packages (and another reason, there are a lot of plugins there...).
How can I make jquery.js and plugins.js symbols to be seen by functions.js?
Thanks

Javascript files are being loaded automatically into Grails app

I'm using Grails 3+. I have a folder in my app grails-app/assets/javascripts. Any js file I put in here loads automatically.
I have a GSP file with this tag <asset:javascript src="application.js" />. This tag loads a file that is in the grails-app/assets/javascripts. So basically the same file is being loaded twice.
My question is this. Why does Grails automatically load the JS files in the javascripts folder? How do I stop this from happening?

Your application.js probably includes the line
//= require_tree .
which includes all files in the current directory and subdirectories. Check out the asset-pipeline plugin docs for more info about the syntax for manifest files.

How to add a js file to a rails project

I'm trying to add a js file which is part of a purchased theme to my rails project.
In my assets.rb file I have
Rails.application.config.assets.precompile += %w(mvpready-core.js)
In my application.js I have
// This is a manifest file that'll be compiled into application.
//= require mvpready-core
//= require_tree .
At the end of my user.html.erb I have
<%= javascript_include_tag "application" %>
But when I load the page console gives me the error
ReferenceError: mvpready_core is not defined
What am I doing wrong and how can I debug this?

I dont think you need to tell anything to the assets.rb file.
The proper way of integrating a purchased theme is to put the required assets files in the vendor folder of your rails project directory. The vendor folder is specially for the third party plugins such as bootstrap. So what you need to do is as follows:
STEP 1:
Copy and paste the necessary JS and CSS files into the particular folders of the assets inside vendor folder.
STEP 2:
Require those files in to the project's manifest file i.e application.js and application.css files.
You can find manifest files here:
app -> assets -> javascripts -> application.js and app -> assets -> stylesheets -> application.css

Let me help you understand a little bit more. Ruby on Rails has some magick that goes on in the background where you do not need to add anything to
assets.rb
once you have setup your new project all you need to do is put the javascript file into:
/app/assets/javascripts/mvpread-core.js
When you start the rails server it will autoload anything you have in following directories:
/app/assets/javascripts/mvpread-core.js
/app/assets/images/mvpread-core.png
/app/assets/stylesheets/mvpread-core.css
Now if the javascript has path's in it linking to images, other javascripts, and other stylesheets you will need to search through the source code and make sure that it is looking for the file in this url path structure:
/assets{javascripts|images|stylesheets}
Also as #Taylor Galeser asked did you put the file in /app/assets/javascripts ?
This is all a very overly simplistic explanation on what Ruby on Rails does automatically for you but it should help you get what is going on behind the scenes better.

Bootstrap 3.1.1: I can't import all the bootstrap .js files, how is "= require" supposed to work?

I am using the latest Bootstrap v3.1.1 Sass.
Within the .zip file, I get
lib, tasks, templates, test and vendor.
I ignored everything and only use the vendor > assets folder.
The assets folder has all the fonts, stylesheets and javascripts I need.
I have gotten the file structure setup properly.
However when I am trying to import .js files from the javascript folder, I am having a bit of a problem.
Unlike the bootstrap.scss file that comes along. I can just uncomment the _.scss file that I need and it will work.
Within the bootstrap.js file, it contains some syntax that I haven't seen before. After a bit of Google, it says 'require' is a nodejs syntax.
I uncommented a few and try to see if they work. However it fails. the .js file I got back is exactly like the above screenshot. It doesn't concatenate modal.js, tooltip.js and popover.js. I did abit of Google, it says I need to have RequireJs?