Webpack - Bundle files in a specific sequence - javascript

I would like to concatenate my .css and .scss files in a specific order.
For example, I'd like to be able to specify the first file in my build process and move to other directories when that is complete (1st .scss files then .css files). In the end, I'd like to have generated a single .css file
I'm just looking for some guidance on where to go and what to read (more specific to my situation) in order to figure this out. I've done a bit of research and haven't found a solution or someone who has tried to do that before.

Related

Why should I use webpack loaders?

Two days ago I've learned about webpack loaders. After 6-7 youtube videos and several hours of practice I know how to use them. But not a single tutorial explained, why should I. They say "We can just add tag and add css there, but let's do it using loaders". So now I know what loaders are and how to use them. But... Why? What benefits are here? What can I do with webpack css- and style-loaders and cannot using ? Or is it better for performance to have css written is js file? What bothers me more is to use loaders for img files, fonts and other files. All loaders do in this case is just change the names and put them into "dist" folder. Why cannot I just put the images I need into that folder manually, why use loaders (I don't speak about compression of files here, because I'm not sure yet if I am able to compress imgs with loaders). So my question is, why loaders? Especially, why loaders for imgs and other files, if I just might as well put them into dist folder myself? What are benefits which I cannot see now
Well you do so you can bundle them up. For example, say you want to work with SASS. You build up your SCSS code, now you have to produce the CSS file and add it up to your html files. Now, if you have a loader, webpack can compile the CSS file for you and bundle it up with your javascript code. So now you don't have to manage style tags as the javascript code will do that for you. Say you have typescript code. That also needs compiling and probably bundled up.
Do you need loaders? They are not exactly required but the alternative is doing everything manually. As per CSS, fonts, images, etc.. You have to understand that Webpack is all about creating a bundle. So it can pick assets and bundles them up. Could you do it manually? Also yes, but then again, that's what Webpack does.

Webpack: require('index.html') vs just copying index.html

I'm fairly new to webpack.
From a YouTube tutorial (Academind) I watched, the guy teaches the user to include the HTML file in the entry .js file. From what I understand, webpack will then use HtmlWebpackPlugin to extract the required HTML file out, then inject either as a file or code into that HTML file. Is my understanding correct?
I'd like the above question answered, but that's not the main question. The main question is the reason for going through such pain.
Can't I just have the .html files copied to /dist and have each .html file have bundle1.js, bundle2.js, etc., in them?
That tutorial required html file because it was thought that it was easier to let webpack (HtmlWebpackPlugin) insert all the script tags for the bundles automatically, without having to do that manually.
You can also not require that, and add the template property on HtmlWebpackPlugin. That will do the same thing.
You can also copy to dist, of course. But that would require you to insert manually script tags on your html. That starts to get worst when you have hashes on your filenames.

How to copy files from exact folder which is positioned somewhere in a folder structure using gulp

I'm wondering is there a way to solve this problem:
I would like to copy all fonts from bower_components to .tmp/assets/fonts, but the problem is that some fonts are .svg, so if I do it in a regular way using this code:
gulp.task('copyBowerFonts', function(){
return gulp.src("bower_components/**/*.{ttf,woff,eof,svg}")
.pipe(gulp.dest(paths.tmpFonts));
});
... i will get all font files along with .svg files, so the mentioned peace of code will also copy images with .svg extension and put them into the .tmp/assets/fonts . So if i could say ok, copy everything from fonts/ within any folder to the desired location it would be great.
I will also use gulp-flatten to copy just files without their folder structure.
So, finally, is there an option like, or how could this work?:
gulp.src("bower_components/**/fonts/*.{ttf,woff,eof,svg}"
I assume that solution is simple, but I couldn't find it so far.
Thanks for the help. :)
The pattern you wrote should work for you.
Keep in mind that Gulp uses glob module:
* Matches 0 or more characters in a single path portion
** If a "globstar" is alone in a path portion, then it matches zero or more directories and subdirectories searching for matches. It does not crawl symlinked directories.

r.js - excluding specific list of files

Hello evryone,
I'm trying to find a way to make the r.js not to copy all the files form my /lib/ directory except for (for example) jquery.js and require.js.
I'm using fileExclusionRegExp option to exclude all *.js files except for the above mentioned.
fileExclusionRegExp: '\/lib\/(?!jquery|require).*\.js'
But after the optimization, I can still see that other files have been copied over too.
Is there anything I'm doing wrong ? Or is the regex incorrect?
Thanks in advance
The problem you've run into is that you are trying to make fileExclusionRegExp match the entire path of a file, but r.js uses it only to test against the base name of files. You can infer this from the description of the option and its default value. The description says:
//When the optimizer copies files from the source location to the
//destination directory, it will skip directories and files that start
//with a ".".
The default value is:
/^\./
If this were to be tested against a full path, it would not be able to exclude files that start with a period if they are in a subdirectory. We also find confirmation of this behavior in this issue report.
If you have only one file named require.js and one file named jquery.js, then you can get by with this regexp:
fileExclusionRegExp: /^(?!jquery|require).*\.js$/
Otherwise, fileExclusionRegExp is not going to do it, and you should use a build step to clean your directory, as suggested by the author of RequireJS in the issue report I mention above.

Node glob pattern for every .js file except .spec.js

I am looking for a better glob pattern for usemin, i want to to find all .js files but exclude the .spec.js files. I have the following solution so far.
<script src="components/**/*(.js|!(*.spec.js|*.scss))"></script>
The solution i have at the moment requires me to keep adding file extensions to exclude them, else they get picked up, for example .html files.
I tried to make it only look for .js files and exclude the .spec.js from them but it does not seem to work.
Also adding a !components/**/*.spec.js as another script below does not seem to work.
This glob includes all *.js but not *.spec.js:
components/**/!(*.spec).js

Categories

Resources