Why should I use webpack loaders? - javascript

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.

Related

How to exclude spe.js files from mix.js()

I currently have this:
mix.js("./enterpath/**/*.js", "../../path/to/build/build.js");
We recently started to introduce tests in those folders for each js file test.spec.js
But now those files are also being compiled with the normal JS.
How do I tell mix to mix all *.js files except *.spec.js?
Well, this is not the best solution as it still compiles it, but at least I can choose not to include that file. This fixed my issue, but this shouldn't be the long-term solution:
mix.js("./enterpath/**/*.js", "../../path/to/build/build.js").extract(["spec"]);

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.

Criticalcss on initial build with webpack fails

So I'm using Webpack to bundle up my js and css.
I've added the Webpack-plugin-critical to output an external css file featuring critical styles. This file gets added to my (twig) template.
It works fine if I run Webpack a second time, though the initial build fails and I get an error saying it can't find the primary generated css file. How do I expose the primary css file output from ExtractTextPlugin to Webpack-plugin-critical allowing it to consume the file and produce a critical css file on initial build?
I think it is impossible.
https://github.com/nrwl/webpack-plugin-critical/blob/master/src/critical.ts#L129
You can see that webpack-plugin-critical use the event hook "emit" which assets files are not generated by webpack compiler yet.
In the other hand, I recommend that you could use an other independent webpack config for generate critical css specifically.
For any one stuck on this. Use this plugin; https://www.npmjs.com/package/html-critical-webpack-plugin
It builds the critical styles AFTER the sass has been compiled.

Webpack bundled aot-compiled src and raw src in one chunk. Is that correct?

i'm little bit confused how aot and webpack is working together without cli. It seems to me that my webpack-config bundled the aot precompiled src and the raw src in one chunk. I refer in particular to the angular-code itself. Please see my webpack-analyzer- screenshot.
I thought actually the index.ngfactory.ts-part in compiled/#angular is the precompiled version of the #angular part in node_modules i'm using.
In my opinion the aot compilation of angular is the only one the browser needed for my dist-bundle. I don't know if that is the way aot is working, or do i have something else in my webpack-config (i.e. exclude raw-src, etc. ?
I use the webpack-config from here

How can i use the RequireJS optimizer to optimize my app to not use RequireJS anymore?

The Answer is below the question:
Maybe I don't understand the whole RequireJS thing fully,
but here is my problem:
I got a set of files like that:
sub
sub1.js
sub2.js
main.js
In all of the files in sub, i use the define() function to define modules. In the main.js, i use the require() function to load all modules. All of this works.
Now when i run the optimizer (r.js) on the main.js, it just takes the content of all files and puts it into one file. Yes, i can then use this optimized file to do the same as what i could do with the multiple files.
All good, no error.
Now my question: In that optimized file, it still uses RequireJS. Can i optimize it to the point, where it doesn't use RequireJS, where it's just the functions put together?
Answer
You can only include RequireJS into your optimized file by setting the include option to "requireLib".
Are you trying to load the file in the script tag w/o using data-main + require.js? OR, are you trying to render the file so that RequireJS is no longer used at all? I suspect it's the latter, which is not possible. If the former, that is achieved by bundling Require in via a build file option: http://youtu.be/m6VNhqKDM4E?t=12m44s
No you cant. The point of the r.js is to compile all your dependencies situated in multiple files into one. So even after compiling the modules are still AMD modules, but now without the need to load them separately. And the modules still need an AMD loader to get work. The only thing you can do after compiling is to use a more lightweight loader loader like Almond

Categories

Resources