Webpack style-loader and css-loader - javascript

Hello Everybody , I Have kind of stupid question about webpack but I really want to know answer for it
What an advantages of using css loader (css-loader, style-loader ) through webpack if I can insert my .css file straight in my index.html for example I understand that webpack using in large and scalable project but can anybody give me the example when it's really helps and give advantage to use it instead of using pure, old and good-known link to stylesheet in main file index.html for example

1- You can pipe your CSS through other plugins to autoprefix your CSS based on the browser support you need.
2- You can minify your CSS.
3- You can chunk your CSS and exclude/include the output dynamically from certain bundles.
4- You can generate source maps for easy debugging.
5- You can have your browser auto-reload when you make changes to your CSS.
6- You can dynamically change your CSS output file names with hashes to invalidate CDN caches.
7- You can import your CSS in JavaScript files.
8- You can use CSS Modules in your JavaScript files.
9- You can eliminate unused CSS rules a.k.a. dead-code elimination.
These are only some of the things you can achieve that came to my mind. There are many more as people keep on writing plugins for the ecosystem.
It should be noted that you don't particularly need Webpack to achieve any of these goals, they could be done manually or with task runners or custom scripts. But if your project uses Webpack for bundling your JavaScript, why not let Webpack handle your CSS as well?

Related

Access generated css in webpack plugin using style-loader

I've a written a webpack plugin which reads less source files and then after processing generates a short css which allows to override the color specific styles in browser using less.modifyVars().
Here is a demo https://antd-live-theme.firebaseapp.com/
But problem is that it does not work with css-modules since class names generated after compilation will be different than what are in those files. So I think it's better to process the generated css by webpack (css, less, style loaders) in my webpack plugin. so question is
How to get that generated css in webpack plugin even in dev mode using where style-loader is being used?
Here is plugin https://github.com/mzohaibqc/antd-theme-webpack-plugin/blob/master/index.js
Any ideas to accomplish this task are welcome. Let me know if there is something confusing.
Thanks in advance :)
If I understood correctly, you need to extract css class names to be used in your plugin.
While it's not recommended to run this on frontend webpack config, you can try to hack your way with babel-plugin-css-modules-transform (which is based on css-modules-require-hook).
This is meant to be used to render css modules on the server.

Whats the point of loading your CSS into Webpack?

When using Webpack, it makes complete sense to use it to package your client-side JS. But what is the purpose of using it to compile your SASS and load your CSS into your page? In the end it appears that you need to use another Webpack plugin (ExtractTextWebpackPlugin) in order to pull out the CSS when you are ready to deploy to production.
It seems like you are going full circle here. Before Webpack you load your CSS in the <head> using a <link> tag like normal. Now using Webpack you load it via your JS bundle. And now for production you use a Webpack plugin to put it right back into the <head> tag again. So what's the point?
There are already dozens of tools and methods for compiling your CSS and live-reloading it in the page without Webpack. What is the advantage of using Webpack for your SASS/LESS/CSS to begin with?
tl;dr I don't think you are looking at Webpack in its' full capacity. If you are hung up on just working with CSS preprocessors than just stick with their stand alone compliers and move on.
Webpack only reads JavaScript, so that's where Loaders come into play. When you want to start working with other file types you'll need to configure loaders to pull out the specific code and have it run the necessary tasks. It's no different than Gulp's Pipelines or Grunt's Configuration blocks.
The point of loading CSS (or any preprocessor) into Webpack is because you want to have a full fledge task runner that handles bundling your code, live-reloading, image optimization, environment variables, code optimizations, HTML templates, among everything else that's possible. You wouldn't just use Webpack as a standalone CSS Preprocessor that's not the objective.

Javascript bundling and module loading

I've recently been thrown in to clean up a project which has like 45-50 individual .js javascript files. I wonder what the best approach would be to decrease the loading size of them all. Just concatenate all files into one with npm or gulp? Install some module loader? webpack?
If you're already concatenating, minifying, and uglifying and you don't want all the files to be loaded on all the pages due to a monolithic bundle, you might be looking for something like Webpack's Commons Chunk Plugin.
This plugin walks down the tree of dependencies for each endpoint defined in your Webpack.config file and determines which modules are required across all pages. It then breaks the code into two bundles, a "common" bundle containing the modules that every page requires, which you must load with a script tag on each page:
<script src="commons.js" charset="utf-8"></script>
And an endpoint bundle for each individual page that you reference normally in a script tag placed after the commons script tag:
<script src="specificpage.bundle.js" charset="utf-8"></script>
The result is that an individual page will not have to load modules that will only ever be used on other pages.
Again, this is a Webpack plugin. I don't know if this functionality is available as a Gulp plugin, because it must have knowledge of all endpoints in order to determine which dependencies are common to them all.
I redirect you to the very good https://github.com/thedaviddias/Front-End-Checklist
In particular the following advises:
JavaScript Inline: High You don't have any JavaScript code inline
(mixed with your HTML code).
Concatenation: High JavaScript files
are concatenated.
Minification: High JavaScript files are minified (you can add the .min suffix).
You can accomplish this with a package manager such as gulp, grunt or webpack (for the most famous ones). You just need to choose what you prefer to use.
If you consider webpack, You can start with my very simple (but understanding) starter: https://github.com/dfa1234/snippets-starter
There's no much thing that you can do, basically is:
Concatenation - https://www.npmjs.com/package/gulp-concat
Minification - https://www.npmjs.com/package/gulp-minify
Instead of creating all those scripts, you can get something to re-use on yeoman, f.e. the Fountain, so it will reduce a lot of time just typing procedural code for doing the concatenation/minification.
Also if you can use some lazy load (like RequireJS or some frameworks have support to lazy load the module, like Angular) that will improve the performance of your aplication
EDIT:
If you want even more performance, you can install some compression tool in your server, for example this one for NodeJS https://www.npmjs.com/package/compression
I'm my personal opinion, if you have time, the best approach would be to read and understand the purpose of the project. Then plan a proper refactor. You are not fixing anything with concatenating, this is just a deployment step.
You should analyze which technologies are being used and if you want to maintain this code, in the long run, make a proper refactor into a much more modern stack, maybe you can take a seed project with ES6, webpack, Babel... and create a proper repository well maintained with proper modularity and dependencies resolution.
Once you have that, decreasing the load its just about adding proper tools in build time (babel, webpack, etc).
You would like to add some unit tests and continue working properly :)

Website with node - couple of questions about browserify or webpack

I need your help with website project I'm working on. My project consits of 7 html documents, 3 stylesheets, 8 .js (including jquery.min.js and some jquery plugins) and some pictures. I want to bundle and minify it as much as it is possible (it would be good to get only 1 css and 1 js file or maybe 1 js, which contains styles inside).
For clarity - now, when I have all dependencies in html - everything is working properly. But I'm not sure how to set all module.exports and requires. Could you tell me how to do it step-by-step in a proper way?
Many thanks in advance.
PS. I write in ES5, so I don't use Babel.
You can do the following to make your codebase a bit more tidy.
Manually group the content of your relevant js files into one and export it as a nodejs module by using module.exports = module_name on the top of your merged js script (Repeat as needed for any jscripts in your project).
Then include the exported module in your main node file and include its main functionality using var modulesfile = require(./module_name); Please note directory paths while importing your js modules.
You can also run a minifier like minifyjs to make your js files size even smaller if they need to be called multiple times from a url. Nodejs installation and usage for minifyjs can be found here.
You can also call other css from within existing ones by using the
#import url("./css/filename.css"); Just verify proper css directory paths first.
In case you also want to use browserify for node there is a full guide in the npm website.
Another good and simple solution is to move all of your codebase in a visual studio web project. From there you can do pretty much what you want, organize your scripts and css files (/Scripts and /Content directories) in bundled configuration files etc.
NOTE: All your code has to be migrated to an asp .NET project to use this approach (as per Microsoft doc) properly.

Require stylesheets and inject them to html as link tag with browserify

I wanna try using browserify for building my projects. It looks pretty cool that I can require js files using relative paths, then bundle and minify that files alltogether. But it remains unclear to me yet, if I can automatically add that bundle to html as
<script src=".../.../bundle.min.js"></script>
And, if I can do a similar trick with css - somehow require css files, including vendor ones, bundle and minify that files and inject that bundled css to html head as <link> tag, not <style>.
Is that possible? If so how? Or, maybe such an idea itself is just a misunderstanding of how projects should be built? If so, where am I mistaking?
You should check browserify-css It allows the minification, inserting in another bundle css file.
But the main function of browserify is to build the JavaScript files into a single main one, but not css processing. It just is not created for css.
I use Microsoft Ajax Minifier to just that. I create the bundled scripts just for what in need for both css and js. It has a -pretty option that just copies the files but not minify to make it easier r to debug.
Order of files matters.
On CSS, be careful if you are using embedded icons such as background-icon:url("somefile.jpg"). Your images have to be placed relative to the path used in the css where ever the bundled files end up, not where your page is.

Categories