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.
Related
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.
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?
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.
I'm using Webpack to compile my JavaScript bundles and am very happy with it. I'm also using it to compile my LESS files to CSS via the ExtractTextPlugin which is also working really well. I've started looking into the end size of the bundle and it's makeup and have found something I'd like to fix:
less-loader is taking up 9.9% of the bundle size. That seems a lot in and of itself, however what really strikes me is that I don't think I really need it in the bundle at all. I've already extracted the CSS as it's own file and don't do any require('./component.less') anywhere in my JavaScript modules.
Is there a way of asking webpack to exclude it that won't ruin the less -> css compilation?
With ExtractTextPlugin, your built style sources do not become a part of the resulting JS bundle. They'll rest in the output directory and unless you explicitly reference the files, they will not be included in the document.
I'm assuming the tool for analysis that you're using includes all outputs of the compilation as being part of "the bundle".
It seems an error in webpack-visualizer.
Open node_modules/less-loader -> index.js, take any string from it (I use loaderUtils.parseQuery) and search for it in your bundle.
I found nothing, so seems loader not included.
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.