Develop Reference

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

Standard or best way to structure a GitHub repo for a CommonJS module for use on the front-end with or without build tools or other libraries?

I'm in the process of refactoring a couple of front-end JS snippets I regularly reuse as CommonJS modules. For my own purposes I'll use them with webpack or browserify and so a single JS file that looks like the following would suffice:
var Dependency = require('dependency');
function MyModule() {
// blah blah blah
}
module.exports = MyModule;
As long as I've got a package.json in the repo with the required dependencies I'll be able to include this module in future projects via npm/yarn webpack/browserify or whatever my toolset is on that given day.
But what if I want the module to be available as a standalone that can be added via a <script> tag?
Should I have 'dist' and 'src' directories in the repo, with the 'dist' directory containing the module code above, alongside an app.js that just says window.MyModule = require('./mymodule.js'); and the 'dist' directory containing the webpacked output for use with a script tag?
Should my bundled dist file contain the source of the dependencies or should I note in the readme, that the <script> tag for my module should be preceded by <script> tags for it's dependencies?
Instead of a 'dist' directory, should I have an (other) mymodule.js in the repo root alongside an index.html that includes it via a <script> tag and demos it's features?
Perhaps I'm over thinking this but I've encountered a number of different strategies in other people's repos, and I'm just wondering if there's any sort of consensus or best practice around this.

How to include a require.js project in an app and minify both

Having two different projects, a framework and an app which uses this framework, I would like to use requirejs optimizer to minify both together.
Files:
/framework/
js/
some.js
other.js
framework.js
/app/
js/
main.js
module.js
I want to create an app.min.js with requirejs optimizer which includes the framework files, and the app files, in the right order.
However, I want the framework to be able to minify itself, so define() and require() calls in the framework are relative to the framework.js file.
The problem is that if I try to optimize my app, it won't find the framework files because the relative paths used in the framework (like define(['./some'], ...)) won't work if I optimize from my app.
How can I do this properly ?

There might be a better way, but you can represent paths as variables
e.g. relative paths in framework can be 'framework/some' and config can define 'framework/' to be '.' in the framework app. and define 'framework/' to be '../framework' in the app's config.

Using one RequireJS project within another RequireJS project

I have a RequireJS project I am working on with the following structure:
Project/
index.html
src/
main.js
projectcomponent.js
lib/
require.js
main.js is the entry point of the Require application and has the following require.config inside it:
require.config
baseUrl: "./"
main.js returns an object.
I want to use this entire project as a module inside another RequireJS project. I attempted to use r.js (the RequireJS optimisation tool) to reduce the project to a single file, which worked - but as it relied on RequireJS, its config conflicted with the config of the parent project I wanted to use this project as a module for.
How can I use one RequireJS project as a module inside another RequireJS project?

You can get round this by using almond (https://github.com/jrburke/almond) to replace the require.js dependency, making the first project a fully encapsulated single file.
There's some further explanation and relevant links on the RequireJS site: http://requirejs.org/docs/faq-optimization.html#wrap

RequireJs minifcation - complex directory structure

we have a problem at work, we are using require js but our folder structure is a bit different,
we have the following:
--js folder
--Folder
---some base js files
-Folder
---main
--src
---require.js
--- require JS modules
--plugin js files
--more js files
We would like to minify all these JS files to a SINGLe js file for production as such
---js folder
--min-all.js
Is this possible?
if so how? ..
Any help would be appreciated!
Thanks!
I just thought I would clarify that the other Folders contain standard non modular javascript files, they can be a mix of plugins or simple javascript helpers.

The short answer is: yes, RequireJS can do this.
Basically, you will need to create one JS file that requires all of the resources that you want minified. Then you will point the optimizer at that file and it will mash them all together.
require(["one", "../another/two", "folder/three", "folder/inner/four" ... ]);
If that file was called myfile.js, you would run the optimizer with similar parameters to this:
node r.js -o name=myfile out=optimized.js
If you have libraries or other files that you do not want included into the final optimized file, you would use the excludeShallow flag. e.g.
node r.js -o name=myfile out=optimized.js excludeShallow=jquery.min
There are more options so you should check out their optimization documentation if you haven't yet.