Develop Reference

Compiling js directories & node modules into single js file

So I have a question, I'm looking into compiling all of my .js files along with the node modules also into one single .js file.
I currently have all of my import statements inside main.js, and then I have my babel script using the following: "js-build": "babel js --out-file js/all.js --ignore js/main/main.js", that takes all the imports from main.js and compiles it to all.js.
Problem:
It doesn't overwrite the files and I can't import node_modules, does someone have any recommendations on traditional ways to use npm to compile js files? Do you recommend things such as webpack? I'd like to stay away from gulp.

i can do it by remove
exclude: /node_modules/

Webpack Including JavaScript File via <script> Tag

I'm using Webpack with Storybook and need to include a JavaScript library file in an HTML file via a script tag. Unfortunately, I get a 404 error indicating that the file was not found (the file's path is based on my local filesystem and is correct). How do I inform Webpack regarding where to look for my library or "static" files?

Add files in entry object in webpack.config.js
entryPoint = {
app: ['path/to/script', 'path/to/script2','./index.js'],
};
This will make sure that you have the library loaded when you have run index.js (entry point of project).
More on Webpack entry points.

Webpack project with mutliple html / js / css files

I think that I've got how Webpack works. My problem is: Most tutorials/examples are based on a single index.html. So, how would I organize my webpack.config.js and directory structure for multiple pages?
Let's assume that I need the following things:
index.html with a css and js file
dashboard.html with a css and js file
profile.html with a css and js file
And here is what I don't get:
How would you structure your src and dist folder?
How do I have to configure Webpack? Probably with HtmlWebpackPlugin(?)
Is a single index.js file enough as entry point / How does one structure the index.js file / How do ES6 projects look in general?
A sample project would help a lot. A project with more than just an example index.html file.
Have a good day! :)

I think u can do that by convert html+js+css into web component and u can do that easily by a framework , i think Vue js give very good boilerplate full Webpack template to let u do that just start to think about the other page as a new component remember that u r using webpack to get a bundle

So you can have one watch output multiple bundle types by passing in a command line arg to build the right bundle. There can be multiple entry points in webpack but webpack is only build to output one bundle. So, to solve this issue I figured passing a command line arg to webpack is a clean way of having multiple bundle possibilities while maintaining only one config file.
To see how this can be accomplished checkout...
https://www.hipstercode.com/blog/27/

Minified file does not use minified module

I have a node.js folder which contains a main js file and several other js files which contain the functions that the main js file will import.
I have minified all the js files in this folder.
In the original main.js file, it calls another module with the following line;
var func= require('./func');
After minification, this line remains the same. However, func.js is changed to func.min.js after minification. Do I have to modify the minified file manually to have it import func.min.js this way?
var func= require('./func.min');
It is quite tedious to manually make changes to the minified file. What is the most efficient way to minify my js files and get the main.min.js working?
I am using Webstorm file watchers to minify the js files.

To get your main.js working, change the require line in main.js to;
var func= require('./func.min');
This will work because you are using Webstorm file watchers to minify the js files. Therefore, when func.js is changed, func.min.js will be automatically generated.

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.