4 ms·

I had a similar issue very recently with webpack. I was attempting to use its bundling capabilities to bundle css and js files for a web application. Believe i

by gortok 9y ago

I had a similar issue very recently with webpack. I was attempting to use its bundling capabilities to bundle css and js files for a web application. Believe it or not, the very simple end-user use case of bundling css is not a part of the core library, nor is it well demonstrated or explained in the docs. After a few hours, I simply gave up and continued to use gulp. We don’t treat user time as precious because our audience is developers; yet startup developers are the people who can ill-afford to lose an afternoon to try to figure out something as demonstrably simple as bundling CSS.

aaron-lebo 9y ago
Does this not work? https://github.com/webpack/webpack/blob/master/examples/css-bundle/webpack.config.js https://github.com/webpack/webpack/blob/master/examples/css-... https://webpack.js.org/loaders/css-loader/#src/components/Sidebar/Sidebar.js https://webpack.js.org/loaders/css-loader/#src/components/Si... Note: examples at bottom of second link, found it by searching "css" in the doc site
- untog 9y ago
  Having to use two loaders (one being loaded by totally non-standard syntax inside the other loader), a plugin (that specifies the output filename nowhere near where the others are specified) and then using a JavaScript require() function to include a CSS file is utterly demented. I get that's how Webpack users are used to doing it, but when you're new to it (or just coming back to it from a different build system) it's the very definition of insanity.
  - aaron-lebo 9y ago
    Maybe, but it's understandable after five minutes and you literally have code you can copy and paste. I've seen much worse in basically every other language. We had a 5k line project, after the first day of setup, we've had to touch the webpack config once or twice. Also, feel free to disagree about the CSS, I think it's a very intuitive way of including assets.
    - untog 9y ago
      You can copy and paste Webpack config to your heart's content, but actually understanding them is something else. I thought the breaking API changes with 2.0 would at least accommodate this incredibly common use of a bundler, but no.
- gortok 9y ago
  I've seen those docs. I tried implementing webpack to replace our gulp bundler (which was initially an ASP.NET Core Bundler) for an ASP.NET Core project. Unanswered questions that I left the project with (I time-boxed myself to 4 hours; as that was the initial length of time it took me to get gulp up and running in totality): - Why do I need a require for my CSS? I literally want to replace the css with its minified form. Maybe even bundle it together (I'd settle for the former). - How the heck is web-pack doing all this; and why is the package called 'extract-css-loader'? I don't want to extract CSS; I want to minify it. - If I want a source folder and a dist/ folder for my CSS; how would I get Webpack to update the URLs in the .html files? - Am I crazy for still doing this through HTML? Is there a 'better way' ?

by gortok 9y ago

aaron-lebo 9y ago

Does this not work? https://github.com/webpack/webpack/blob/master/examples/css-bundle/webpack.config.js https://github.com/webpack/webpack/blob/master/examples/css-... https://webpack.js.org/loaders/css-loader/#src/components/Sidebar/Sidebar.js https://webpack.js.org/loaders/css-loader/#src/components/Si... Note: examples at bottom of second link, found it by searching "css" in the doc site

untog 9y ago
Having to use two loaders (one being loaded by totally non-standard syntax inside the other loader), a plugin (that specifies the output filename nowhere near where the others are specified) and then using a JavaScript require() function to include a CSS file is utterly demented. I get that's how Webpack users are used to doing it, but when you're new to it (or just coming back to it from a different build system) it's the very definition of insanity.
- aaron-lebo 9y ago
  Maybe, but it's understandable after five minutes and you literally have code you can copy and paste. I've seen much worse in basically every other language. We had a 5k line project, after the first day of setup, we've had to touch the webpack config once or twice. Also, feel free to disagree about the CSS, I think it's a very intuitive way of including assets.
  - untog 9y ago
    You can copy and paste Webpack config to your heart's content, but actually understanding them is something else. I thought the breaking API changes with 2.0 would at least accommodate this incredibly common use of a bundler, but no.
gortok 9y ago
I've seen those docs. I tried implementing webpack to replace our gulp bundler (which was initially an ASP.NET Core Bundler) for an ASP.NET Core project. Unanswered questions that I left the project with (I time-boxed myself to 4 hours; as that was the initial length of time it took me to get gulp up and running in totality): - Why do I need a require for my CSS? I literally want to replace the css with its minified form. Maybe even bundle it together (I'd settle for the former). - How the heck is web-pack doing all this; and why is the package called 'extract-css-loader'? I don't want to extract CSS; I want to minify it. - If I want a source folder and a dist/ folder for my CSS; how would I get Webpack to update the URLs in the .html files? - Am I crazy for still doing this through HTML? Is there a 'better way' ?