preface: I'm fucking exhausted and angry.

Why does everyone assume I know how to do frontend?
Why am I always the design girl?
Why?

You hire me to do backend. STOP GIVING ME FRONTEND DESIGN CRAP. I HATE IT.

AND STOP GODDAMN YELLING AT ME FOR NOT MAKING SOMETHING RESPONSIVE.

I DON'T KNOW HOW.

yes i can learn, but I CAN'T FUCKING PICK UP A SKILL LIKE THAT IN A DAY. Also, I fucking hate it.

STICK IT UP YOUR (min-width: 1400px) ASS.

But seriously, I've spent 13 hours today figuring out completely new things (webpack, susy, express.js, cloudinary, responsive best practices, more webpack) because the boss is in panic-mode (his preferred state) and wants this project released last monday.

guess what? it isn't done.
because i still don't know how to do everything. and ofc there's nobody to ask because there never fucking is.

Seriously, boss-man. hire a fucking designer, and stop being an illiterate sales goon while you're at it. ffs.

Handy guide to webpack:

1. Copy-paste stuff from internet until it works.

That's it!

Just reached 100+!!

Anyhow. I started coding prettymuch 365 days ago. My mate decided to launch his company and figured it was a good idea to start it with good friends who knew fuck all at coding.

Fyi, the dude can code 15 hours straight everyday for about a year (no shit thats what i saw).

Since he taught me html css javascript(even if i still suck abit at js). He made me remake the whole bootstrap in react by adding this new lib styled-components and test everything(95% coverage :)).

He also taught me webpack and rollup. Json schma forms，http requests redux， redux logic， and all the routing shit...he obliged me to i plement RR4 on release and is now making me overlook the merge requests of my other collegue (yes he made me a git pro，almost).

And now i have to work long distance by studying java， spring， oauth2 and start working on our api.

O yeah，and i went from microsoft to full on linux!!!

To be honest i thought i was gonna die this year. (Also have a kid on the way :)).

Devrant has been like going to the psychologist :) everytime shit hit the fan i realized every one has the same problems :)

Thanks to the community i can also now even give out nerd jokes :)

(L)Devrant

She - So. Do you read ?

Me - Yes. Infact a lot. Daily. My life is filled with it.

She - Wow. Nice. So what do you read mostly ? Which one is your favourite

Me - Mostly Documentations. Vuejs documentation is my favourite followed by express and mongodb documentation. And yeah webpack. You should read them too. Then there is a book on ES6, 'Understanding ES6' by Nikolas S Zakas, famous author and programmer. Great stuff

!rant

I built a decently large project at work, and everything works perfectly. It's beautiful, it's fast, it's light, it's organized and clean, and deploying is a breeze. I'm very proud of it.

The biggest reason, though, is that it uses exclusively technology I had never touched before:
• React
• Redux
• ES6/Babel
• Webpack
• Express.js
• Material Design
• Apple lappy (I'm a linux girl)

I was completely new to all of these, including my dev machine. Every single aspect of the project was outside my skillet.

But it went from my first experimental `import React from 'react'` to production-ready in three weeks. I'm really proud 😊

Straight from the docs: just uglify being honest

Me: Well, it's time to make a new app!
* opens up VS Code *
* opens folder selection dialog *
* creates a new folder called "notes app" *
* yarn inits that folder *
* installs react and react-dom *
* installs webpack, webpack-cli, babel-core, babel-loader, babel-preset-env, babel-preset-react, style-loader, css-loader, file-loader, html-webpack-plugin and clean-webpack-plugin as a dev dependency (install is pending) *
* copies a webpack config from some other project *
* creates a babelrc file *
* copies a yarn script called "build:dev" which would launch webpack *
* dev dependencies installed *
* tries to save *
* vscode doesn't save because files differ *
* tries to copy dev dependencies *
* fail *
* tries again *
* saves *
* writes bare-bones index.jsx *
* yarn build:dev *
* opens build/index.html in firefox *
* gets satisfaction *
* writes bare-bones App.jsx which is a react component but it's an entire app *
* yarn build:dev *
* opens build/index.html in firefox *
* gets satisfaction *
-- trim --
* walks out of his room to his mom's room where's sbc is located *
* grandma plays solitare on laptop *
* i ask grandma for a laptop *
* grandma gives me laptop *
* glues all components into App.jsx *
* yarn start:dev (magic of webpack-dev-server) *
* opens localhost:8080 in firefox *
* searches how to update a component prop *
* nothing found *
* registers on devrant and verifies his email *
* writes this rant *

Hello, I just want to let you know I'm working on a 15 year old product and it is currently in production.

It uses Angular.js and one of the earliest versions of React.js. I cannot use ES6, we don't have Babel, no JSX syntax, no CSS preprocessor. No webpack.

I must support browser since IE6 with an ES3 syntax. (luckily I got some some polyfills for an ES5 syntax)

When I build a component I have to call React.createClass and React.createElement.

The render() function is basically a nested pile of React.createElement.

There is no documentation for this product, no tests, no anything.

I had to reverse engineer it in order to understand how it works.

The code base uses mixed programming styles and naming conventions, plus thousands of little js files.

Oh and obviously no hot reload, every time I make a change I have to restart everything.

Please, send help.
I'm in danger.

Sincerely,
An underpaid developer

....
I'm not crying, you are crying...

Ruby. Ruby this. Ruby that. Ruby in a box. Ruby with a hat. Ruby with a fox.

My job swears that there is no need for React, even though Rails now comes baked with webpack.

React with a jet pack. React with webpack. React in my web stack.

Miss those days when web development used to be easy...

Now the react, react-router, redux, server-side-rendering, redux-form and nodejs...making me crazy.

And oh how can you forget the fucking webpack.

Someone please kill me.

You know what?
Fuck Webpack and Babel, too.
They're way too complicated and finicky to set up.

I want to write a simple library, not a freaking research paper.

My friend and boss，told me he would teach me code 2 years in a half ago.

I didnt know what css or html was and i used to call java javascript.

I can know create my own module with webpack， have my automated doc， use react， redux， he taught me linux， git，unit testing， databases，docker， and so on...

Im not an expert in any of it butbi know what they are for and can play with them more or less comfortably.

The best advice he ever gave me was:

“coding is not about coding. We are like the greath painters of history. They were great at painting but even more at creating. If you have no creativity， you can paint as well as you want， its worthless.”

Should you use webpack in your next front end application? Well heres one question to ask yourself to help you decide:

While developing your application, do you feel your application could benefit from the introduction of 14,372 impossible to understand errors, each requiring hours of research to debug ...

you do? well boy are you in luck!

I have no words to describe how I'm feeling these days. I have to do a C project for uni.

After a couple of years dealing with web dev, javascript, typescript, angular and stuff, for the first time I have a project where I have to deal with only two problems:

1) my code
2) my machine

No tools, no bloated libraries, no webpack, no json configurations, no tutorials.

It's just me, vim, gcc (actually nvcc, it's a cuda based project, but still) and the cuda manual.

I feel I'm actually building something.

Plus, the guy I'm doing the project with is cool with this stuff and most important he's open minded.

I'm happy

Grunt, gulp, bower, webpack, rollup, yarn, npm, requirejs, commonjs, browserify, brunch, rollup, parcel, fusebox, babel,
wrappers for bundlers, frameworks on frameworks, then for css, theres scss, sass, less, stylus, compass, and for templates, handlebars, mustache, nunjucks, underscore, ejs, pug, jade, and about five billion other word-salad tools, all with their own CLIs, each in some way building on npm, but with their own non-congruent little syntax, like no one realized they were reinventing the same problems introduced by domain specific languages, most happy to announce "configuration takes a little time, but it's worth it!"

No, it's not. Just stop people. Just stop. You're not doing anyone any favors by creating another lib, all you're doing is tooting your own horn and self promoting. Use what exists and stop creating more shit for new people to learn, to add to the giant clusterfuck that is the 2019 hotmess known as "web development."

You're not special. You're not important. You're lib or tool will be famous for 15 minutes and no one cares what you've made.

If you want to contribute to web development, do us all a favor and contribute to global sanity by kindly deleting your contribution and any plans to contribute new solutions to problems that have already been solved.

Stack Overflow. Everyone uses it but everyone seems to hate the community. I very often read about someone getting down voted and they all say the same thing - "I have no idea why".

I have spent a lot of time moderating SO posts, which gave me a lot of reputation and medals. I find it fun to help people and it feels good to give back to the community.

I have asked a bunch of questions and I've never gotten a single down vote, which leads me to believe everyone of you that is constantly getting down voted are doing something wrong. Because the posts I see getting down voted are fucking stupid questions that either lack information or contain too much information.

Example 1:
Server java error

Why is my server not working? I am using Tomcat, port 8080 and I'm getting IOException.

Example 2:
Webpack configuration not working

My webpack is not a working, why?
[entire webpack config]

End examples.

What the fuck are you expecting asking questions like these?? No one gets paid for answering your questions, so the least you can do is write a CLEAR AND UNDERSTANDABLE question. I'm not gonna tell you how to do it because there's A LOT of information on how to do it.

People devote hours and hours to helping others on SO, and of course they get fed up with the stupid and lazy questions. That community is not about being nice, it's not about making people feel welcomed, it's about QUALITY OF CONTENT. No one is crying when they find a superb question + answer, right? That's the result of a community not accepting low quality content.

So please, the next time you get a down vote on SO - do not come here whining about it but instead take a look at what you have posted there and ask yourself if it could have held a higher quality.

Thanks!

Front end engineer road map for 2018

Stickers on my work macbook!

So, I'm using a new MacBook Air (running Sierra), and while I'm still getting used to it (especially the different Sublime hotkeys), overall it really is quite wonderful. I particularly love the magic touchpad and ease of scrolling/swiping between desktops.

However, I ran into an issue this morning that gave me pause: apparent file caching.

My webpack setup auto-compiles my project when files change, and I noticed something was causing errors -- not really surprising since I was in the middle of fixing the project last night. However, the error it displayed wasn't something I was expecting, and referenced a line I was positive I had removed several hours before calling it a night. Whatever, I was probably mistaken, so I went to remove it.

... It wasn't there.

I double checked that I was looking at the right file. Yep, src/styles/header.scss -- that's the correct file. Figuring webpack was acting up, I killed and restarted it.

Same error.

So whatever, maybe Sublime cached it. Rather unexpected, but possible, and I am on a mac now... so maybe. So, I closed the file and reopened it. The line wasn't there. I did this twice more. It STILL wasn't there. Maybe I'm going crazy...? I checked the file with cat. The line was there. I checked with vim. The line was still there.

OKAY. I've seen a lot of people with beef with Sublime, and I often defended it. but maybe they're actually right. maybe Sublime really isn't the way to go. :( So, I killed and reopened Sublime, and I checked the file again.

The line STILL ISN'T THERE.

Maybe I'm going crazy? I double, triple, quadruple checked the path. all correct.
Alright; let's try again and make sure I do it properly. I closed everything I had open in sublime (two projects), and quit. I reopened Sublime, navigated to the correct path, and reopened the file...

The offending line STILL wasn't there.

I'm angry at this point and just mash the keyboard. I save the resulting garbage, and cat the file again. No visible changes.

KAJSFLK STUPID PIECE OF <redacted>

okay, whatever. Reboots fix everything, right? So I reboot, and keep the option to re-open everything again ticked.

The terminal comes back up, along with half(?) my browsers, but Sublime doesn't. grrrrrrr.

so I cat the damn thing.

GUESS WHAT.
THE GARBAGE IS THERE.

Sublime was doing its job. BUT EVERYTHING ELSE FAILED.

(Oh Sublime, why did I ever question you? 💚)

... but seriously, what the fuck could have caused that? Was the OS caching the file for some programs, but not others? Now I'm questioning the macbook...

One of the speakers at a tech conference I went to used a screenshot from here to express her frustration with Webpack. I would've never found this app if it wasn't for her. Thank you and hello everyone!

I'm a backend engineer, but since I pioneered the entire project, I had to work on frontend. And so I died on Mar 2 2018 because of Webpack and Vue

Last night I nearly finished my portfolio site. I was working on the perfect framework and workflow like forever. But in the end I accomplished a pretty pleasing solutions. For the back-end I choose Laravel with it's built in rest-api, the front-end is managed by Vue. I'm also proud of my assets-management which is handled by Gulp + Webpack (Laravel Mix). But here I decided to run Gulp on images, fonts and CSS and let Webpack bundle the JavaScript.

And what really crawls my balls is that I can write Sass and Jade, even use partials and organized the shit out of this website, and let Gulp just vomit some minified HTML and CSS on the other end.

Man that feels so good.

Modern web frontend is giving me a huge headache...

Gazillion frameworks, css preprocessors, transpilers, task runners, webpack, state management, templating, Rxjs, vector graphics,async,promises, es6,es7,babel,uglifying,minifying,beautifying,modules,dependecy injection....

All this for programming apps that happen to run inside browsers on a protocol which was designed to display simple text pages...

This is insanity. It cannot go on like this for long. I pray for webasm and elm to rescue me from this chaos.

I work now as a fullstack dev as my first job but my next job is definitely going to be backend/native stuff for desktop or mobile. It seems those areas are much less crazy.

1. have an exciting app idea
2. create project folder
3. include WebPack

…

47. lose all passion for project and give up

GOTO 1

Steps to writing Javascript in 2018:
1. mkdir and touch necessary files.
2. install and configure babel.
35. Start configuring webpack.
900. open app.js

Hmm our bundle js is already 1.35Mb maybe I should do something with that.

... Insert 2 hours of frantic webpack magic + babel-preset tweeking, tree-shake code optimization ...

- npm run build
- bundle.js => 1.37Mb

Great Success! I'm going to take a lunch...

Completed Angular 2 course on codeschool, really liked improvements and simplicity of Angular over Angularjs. Decided to do quick start guide in official website. Oh my f**king god... I need to setup webpack, typescript linter, typings, polyfills etc angular2-cli is no better, crawling with errors... why... why can't one just start a project and work instead spending loads of timing configuring all of that... AND WHY WE CANT HAVE PROPER SUPPORT FOR LATEST FEATURES...

I don't even know what I am ranting about... I just wish to spend more time creating things than configuring for ages development environment.

Fuck Webpack.

I seriously do not understand the rants against Windows.

I love Windows 10 (got as free upgrade from MS), and have no issues with MacOS or Linux OS. I use them as well but do all serious work on Windows.

All my life, I have worked on business / commercial side and picked up Web development in last couple of years. I started using computers on DOS in 1992, and shifted to Windows 3.0 in 1995. There was no Mac or MacOS back then.

For serious work, I purchased a old Dell Precision M4700 workstation grade laptop with quad-core i7, at throwaway price, got 32GB RAM, 2.4TB (1x2 TB + 400gb) of SSD on super sale online, and installed it myself. It easily supports dual 4k monitors.

Git-bash on windows allows all the necessary linux command line on windows. Though not tried, Windows 10 allows embedded Ubunutu with linux terminal. Web development tools like - VSCode, git, github / bitbucket clients, NVM/Node, React / Redux / Webpack / Gatsby / Jest, REST clients, GraphQL client and server, Graph Server, Chrome PWA / Chrome Dev Tools, http/Websocket/WebRTC interception, Google Firebase SDKs, AWS sdks, cloud utilities, CI/CD tools work flawlessly. Windows even has its own package manager for applications.

Go home node.js you're drunk. You don't need 441% CPU just to compile typescript

"If you use a css framework splat splat splat splat bullshit bullshit bullshit"

Listen fam, I write apps that a good portion of the time will be used internally by the company I represent or work for. They don't give 2 flying fucks if I write an entire webpack ecosystem for them to push out assets and 10k outher bs shit in to their frontend end. They just care that shit connects properly to their backend and it spits out the information they need, which 9 times out of 10 does not require a lot of the shit y'all cry about.

Bootstrap will suffice, bulma will suffice. I don't neckbeard over simple shit like this.

Why I can't just get this fucking Webpack working?

😡😠😡😠😡😠😡😠😡😠

Fucking es2015! Fucking Babel! Fucking JavaScript!

...No. Sry, JavaScript. I actually love you.

I just wasted 20 minutes debugging a component that, when included in the parent template, caused an untraceable infinite loop.

Out of desperation, I finally just renamed component to "pants". It works.

...huh?

Renamed back to its original name. THAT works too.

...Huh??

While I'm still struggling with Webpack and Babel. There's one light in the end of this abyss. Dear @AlexDeLarge is reaching out and helps me with all his experience. devRant, what a wonderful place.

Ooh, look! Node got async/await!
Ooh, look! I can lint shell scripts with shellcheck!
Ooh, look! Webpack 2 has been released!
Ooh, look! I can switch over from npm to yarn!

There is so much stuff I want to upgrade and optimize in our project, that I forget about the actual JIRA ticket.

Don't you just hate where we're going forward with these different JS frameworks and packages? WebPack, Electron and all the other ways we try to use JS for desktop development and a simple build of a tiny project taking 10 mins on an average spec core i7 machine, then overdosing on npm install since every frikn thing is now so modular you donwload a gazillion packages just to set up user authentication with a simple route manager in your app.

JavaScript is fine really for certain purposes. It's these other frameworks that try to modularize every single aspect of it that sucks. If there's anything called too modular, JS has reached it now. over-modularizing, and over-complicating everyday trivial tasks just to introduce yet another frikn package or framework.

Really missing the good'ol monolithic days of programming. I mean, modular is fine bro, but for godsakes draw the line somewhere!
#NoMoreOneLineModules

Oh, thanks, webpack.

:/

<rant>The state of front end web development in 2016</rant>.

Current project:

A fairly simple and basic single page-ish project with no framework at all.
No backend or database.
No jQuery.
Plain old Gulp task, npm scripts and Webpack.
Some parallax and other scrolling effects.
Client is actually a pretty simple, cool and understanding guy.

This is too easy.

What is this madness??

fuck webpack

That sinking feeling when you use ES6/Webpack/Vue on personal projects and have to work with ES5/jQuery/Angular (and no task runner) at your regular job...

*Makes a small change in Webpack generator for Eclipse Theia*

*Takes 10 minutes to complete all tests*

*PR*

*Travis CI builds*

*Takes 30+ minutes*

Uh, Travis, you okay?

Wish all JS frontends were built with webpack and ES6 and Vue. That's the world I dream of 😙

Does anyone feel overwhelmed by all the new technologies? It's like every developer nowadays code in JS, and knows ES6, React, webpack, babel by heart. I have been working in Java for less than a decade and sometimes feel like I can't catch up. Even in Java ecosystem there is now Scala, Groovy, Gradle, Kotlin... Not to mention other languages like Python, Swift... How do you guys have time to pick up everything?? 😖

Watching google (chrome) dev summits is always both a blessing and a curse, their constant masturbation makes you catch air just to not vomit, but then they give actual interesting insight into webpack features.

That moment when you build your webpack project and it doesn't get the progress right. lookin like h4ck3rm4n now

This is legit how I look when I go about exaining webpack, react and redux to people

Me setting up Webpack for a project

Error: can't resolve ./src

Guess what? ./src exists. So I go searching for an answer, and it turns out webpack looks for ./src/index.js and if it can't find it then it throws an error.

But the error message is: can't resolve ./src

The issue was reported ages ago but webpack devs never improved the error message

THIS IS WHY WEBPACK SUCKS 💩

Yes it might seem like a little detail but it just makes it all the more obvious that Webpack sucks right from the start when you set up a project the error message is stupid and unspecific

Fuck webpack !

Me: Why did you exit the build?
Webpack (W): Build exited with code 2 - Eslint error at 2:1 in *filename*.scss 'Expected 2 line indent'
Me: internally *ARE YOU KIDDING ME?!?!?!? YOU FAILED OVER AN ESLINT STYLING!!!* *curses out original dev profusely under breath while fixing styling*

HOW THE FUCK

DO I USE A NPM PACKAGE

THAT DOESN'T SUPPORT IMPORT X FROM PACKAGE

IN A TYPE:MODULE

REPO?

WHY THE FUCK CAN'T NODE JUST SUPPORT BOTH

WHAT IN THE FUCK

HOW DOES WEBPACK LET YOU USE BOTH?!

I CANNOT FIND A WORK AROUND FOR ERROR

SyntaxError: The requested module 'file-type' does not provide an export named 'default'

WHAT THE FUCK?

DO I NEED TO USE A DIFFERENT PACKAGE?

WHAT THE FUCK

Learning webpack 😶🔫

There you are, fiddling with next.js webpack settings, because your isomorphic JS-in-CSS-in-JS SSR fallback from react-native-web to react-dom throws a runtime error on your SSR prerendering server during isomorphic asynchronous data prefetching from Kubernetes backend-for-frontend edge-server with GraphQL.

You have all that tech to display a landing page with an email form, just to send spam emails with ten tracking links and five tracking beacons per email.

Your product can be replaced by an Excel document made in two days.

It was developed in two years by a team of ten developers crunching every day under twelve project managers that can be replaced with a parrot trained to say “Any updates?”

Your evaluation is $5M+. You have 10,000 dependency security warnings, 1000 likes on Product Hunt, 500 comments on Hacker News, and a popular Twitter account.

Your future looks bright. You finish your coffee, crack your knuckles and carry on writing unit tests.

Getting ready for my new React project.

Vim: Check ☑
TernJS: Check ☑
Webpack: Check ☑
Gulp: Check ☑
Nodemon: Check ☑

Now I begin 😆

Quick backstory. I've negotiated with our customers to drop IE11 support (happiest day of my life) and decided to also refactor and update our webpack configuration. I asked a bunch of questions about a few exclusions we had for JS processing and received a reply of: I don't know if we need these anymore. Queue a snippet of my response in a meme format on how I wish to proceed with the change done by our tech lead.

Errors be like "Source.ts 44:38", Source.ts has 28 lines. Alrighty.

Just wrote my own webpack plugin for VueJS.

In serverless application there isn't a good way to pre render a single page web application as there is no server to do this task.

What we can do is use serverside rendering with webpack to locally (or in CI) generate the static HTML markup and include them in a template file like EJS.

In that way, the client browsers would not have to wait for the initial render and the search engines will also be happy.

This feels good! Time to upload it as a npm package 😇

I find webpack very complicated especially when it comes to understanding config.js file.

I might give 4th try later.

I fell in love with Vue and Webpack! 😍😍😍
It is such a breeze to work with components and to be able to just change something and have everything instantly recompile and update on the webpage. I am actually enjoying doing the frontend more than the backend which is strange because I am a backend guy 🤣

Webpack and Babel make me want to kill myself. Takes longer to set a project up than it does to write the damn thing.

I don't understand how these people worked like this. Every time I make a change in the JS, CSS or HTML files, the entire app rebuilds with Webpack, and logs you out, so you have to log back in and navigate back to where you were working at.

Apparently they did this because clients were complaining that front end files were being cached and doesn't see any changes, so to clear the cache, every time you refresh the web app in the browser, it logs you out, effectively clearing your session.

Fuck the morons who built this piece of feces.

Ugh.

Still I'm getting hardly fucked by Webpack. If there's any good god in this universe, please kill me. 😰

Looking back on 2022 from a developer's perspective, even without talking politics, war, climate, health, and injustice, despite CSS updates and AI progress, it feels like two steps forward, one step back. I used to curse ReactJS and Webpack, but we can have breaking changes everywhere else, like PHP 8 vs. WordPress. Oh yeah, and why do customers still love WordPress so much that we have to mess with this unstable abomination with its half-baked Gutenberg block editor and (full) site editing? And what about "social" media? Well, never mind, after Usenet and Myspace, why did people favour Facebook and Twitter in the first place? Thanks to devRant, there is at least one site where I rant about obscure tech topics from my subjective point of view, using swear words and exaggeration, without getting downvotes. Maybe I am even allowed to say "Mastodon" here? Thanks and merry Chanukka, Jul, X-Mas, Y-Mas, and Z-Mas and a happy new year everybody!

Modify the front-end code and noting change.

Empty the cache... ✔️ not work
Check xampp open... ✔️ not work
Check my sass compile... ✔️ not work
Compile vuejs webpack... ✔️ not work
Check my laravel route... ✔️ not work
Check with Xdebug... ✔️ not work

Go get coffee... ✔️Not work

See the url on stagging.<website>.ca in my browser ❌

😲🙄😅 Holy fucking retard i am...

Had an interesting application for a web / fs position the other day. Some guy in his 40s sent a CV, along with a bunch of 5+ years old reference letters (recommending him for things like PHP 5.3 and ExtJs 4). A bit outdated but okay.

And then, he put in a list of NPM packages he used. Not just relevant frameworks like Angular & React, or tools like Webpack and Babel. No. A list. Of. NPM. Packages. There were things like UUID there, which is literary a single function!

Front-end web development in 2018 is a fucking dumpster fire. 4 month old blog post guides are out of date, hipster toolchain APIs change monthly, npm can't find a module that is literally right there in its entirety in the fucking node_modules directory. JavaScript is love. JavaScript is life.

I can do time travel 😁😁😁

Fucking Webpack. This article is already out of date.

I hate PHP but those videos at Laracast are amazing and helped me learn Vue, and basic Webpack with Babel. Thinking about watching their PHP videos, but I'm not a web dev and not planning to, any advise? Though I do write websites for my self only

If you’re stuck in hell, I mean, Webpack, try parcel. I was skeptical until I used it, and it’s just magical

Sick and fucking tired of this bullshit.
Previously worked with Laravel, used 'gulp watch' to watch for changes in assets and now they changed things for the better of Laravel Mix as a fucking wrapper for webpack. Now I have to do shit load more stuff to get gulp working, 'cause otherwise my 'npm run watch' shits itself every fucking time I run that shit, doesn't matter what fix is aplied. Battling that bullshit for 3 days now and shit's not working anyhow. Stupid fucking bullshit. Sorry, had to let it out from myself.

Ugh I was so bored creating icons that I decided to create an app icon generator with Webpack-style config and icon generation for multiple platform + custom shape for desktop

Bug I had to fix today: some elements in our React app were being swapped with other elements.

We had `<foo>bar</foo>` on the component but on the html `foo` was being swapped with some other element in our app. It's contents ("bar" in the example) were being left in place, though, so we were getting `<baz>bar</baz>`.

This would only happen when running on production mode. On development everything was fine.

Also, everything seemed fine on the React dev tools. `foo` was where it was supposed to be, but on the html it was somewhere else.

Weirdest shit I ever saw when using React. I found a way to go around it and applied that fix, but I'm still trying to track this down to the source.

The worst part was waiting for fucking webpack to finish the production bundle on every fucking change I wanted to test. I didn't miss the change-save-compile-test flow at all.

What a shit day.

I hate Sass.

When installing all NPM dependencies with npm i, it's always quick, but not with sass. Ooooh myy goood. It starts compiling. It always misses something. Your node version is always not what sass needs. It pulls out gyp which requires some native shit. The build is never reproducible, it always fails with some horrible two mile long poorly-formatted stacktrace that is just gibberish.

More than that, sass is just poorly designed tool used by frontend fuckboys to write imperative, nonstandard, non-maintainable styles. If you know shit about css, you don't need sass.

I'm so happy it's going to die along with gulp. Webpack and css modules are here.

Yes, css-in-js that has a runtime penalty is also shit. If you like its syntax but dislike everything else, use Linaria. It has no runtime penalty and looks just like other css-in-js solutions.

If you said “I like webpack” when I said “Fuck Webpack.” I have downvoted your comment.

Keep your satanism in your own corner, we will stay here in our universe without people like you who enjoy pain and internal death.

I like webpack, but maybe not anymore after today.

Was working on my side project with already configured webpack and after some time I realised somethong is wrong with my styles, but it was not before.

Then I realised, that Chrome won't load CSS at all. I checked my source, but it seems to be perfectly fine. No errors while building. CSS is even included in the bundle generated...WHAT THE FUCK?

Damn frontend crap.

The fact that you have to mask all of the disease with processable versions of css, html & js is bad enough, but there are like 6 dialects of each bandaid, and every project has traces of each.

The the design kid tells me to run this grunt script, frontender number two screams "no, dont use grunt, we use gulp! or was it bower? I guess just run it through yeoman, it's easy!", after which the third fucking shitty hipster yells "No that's outdated, just edit the webpack file, and then run yarn install... oh but run npm upgrade --global yarn first"

Did you just fucking tell me to upgrade a fucking package manager with another package manager?

Composer, gem or cargo are not always without problems. But at least us backenders have our fucking shit together. The worst we have to deal with is choosing Python 2 vs 3, or porting some old code so the server can migrate to PHP7.

The next person to tell me they found this awesome tool to manage his other tools... I'll fucking throw your latte all over your wacom tablet.

To whoever builds electron boilerplates.

STOP ADDING FUCKING JQUERRY AND WEBPACK TO THIS SHIT, I DONT EVEN USE YOUR BULLSHIT BUT OTHERS DO AND THATS WHY SO MANY ELECTRON APPS SUCK. WHO IN THEIR RIGHT MIND THINKS THAT THIS MADE SENSE PUT YOUR CSS LOADER ANAL PLUG IN TO YOUR ANUS AND BUNDLE THEM TO YOUR SINGLUAR BDSM.JS WITH BROWSER BACKFALLS AND BETTER MAKE SURE TO WHIPE YOUR DIRTY SHITFACE WITH A FULL BLOW CSS RESET BETTER MAKE SURE THERE IS NO ACCIDENTAL MOZILLA STYLE IN YOUR CHROME.

Why on gods green earth, would anybody look at a file with 20k lines, which clearly was made by something called WEBPACK and decide it's the right place to implement their changes for the next few years?!?

Heureka! I made it work! I made it work!

After two weeks of trying shit and fixing without any clue what the fucking problem is, I finaly made it work.

Somehow Atom had a problem finding the correct paths on my Windows 10 machine. After I retried it on the Windows Console it perfectly worked.

Some solutions are simple. Some problems are stupid!

All thanks goes to @AlexDeLarge for writting awesome comments and understanding Webpack so damn well.

Wake me up when you finish configuring webpack.

Time required to fix a simple CSS issue:

- Under normal cirumstance: 2 minutes
- When webpack goes all awry: n + 2 minutes!

The thing that I most hate is when you're approaching a new framework/tool, you follow the official documentation and the first example doesn't work.
I'm trying the official documentation of webpack, I tried the first example and guess! Error! It says that's probably a breaking change. Where the hell should I learn it? I don't have the crystal ball, should I guess how your fucking tool fucking works? Oh my god, it's ok if you introduced breaking changes, but just update all the references, is it so hard?

> TheSmartGuy: listen, IHateForALiving, I know you're a frontend developer, but here in the backend...

Just so we're clear: I'm NOT a frontend developer.

I'm a full stack developer.

I just so happen to always end up working on the frontend because you bunch of handless monkeys wouldn't be able to write a webpack config file if your life depended on it.
It's not you taking care of my inability to work on the backend, it's me being relegated to using only half of my skills because you ugly things refuse to evolve. I could take your job in a breath, I wouldn't trust you with writing a css selector.

!rant ?

So I had 2 Stack Overflow questions open about Rails / Webpack data communication, plus one issue open on Webpacker's github for 3 days, desperatly looking for an answer or an idea. No answers.

Today I talked a bit with my flatmate about my problem, dude gives me a perfect, easy to implant solution, and life seems to be bright again. Thank you Alex 😥.

I just officially graduated from a web dev program and it feels...

Very underwhelming.

Learned ES6, React, Webpack, service workers, offline databases, accessibility, (...bla bla bla)

And my knowledge with data structures and algorithms isn't even that great yet.

I look at the stuff I still don't know and wonder if I'll ever be comfortable with my level of expertise.

Getting webpack to work the way I want it. Only consulting the docs.

Just gonna leave this here because I am too lazy to write a proper article for my website:
If anyone is trying to create a Vue.js website with Node.js backend do NOT use express-vue, it is unnecessarily complicated and broken. Instead use this method I found.
You will need:
- IntelliJ IDEA / WebStorm / other IDE supporting multiple modules per project and tasks
- Nodejs and npm
- vue-cli

Step by step:
1. Create new empty project
2. Add your frontend module using vue-cli generator
3. Add your backend module using Express generator
4. Run npm build in your frontend module once
5. Move or remove public folder in your backend module
6. Create a symlink from your backend module root called public pointing to dist folder in your frontend module root
7. Make sure to add "Run npm build" from frontend module to your "bin/www" task (default task for Express module)
8. Enjoy developing your REST API in Node/Express and your frontend in Vue.js with single-file components and it being served by the same server that is providing the backend.
(Since they are separate modules and you are not mixing webpack and Node/Express you can add ts-loader, stylus-loader, pug-loader or any other loaders without screwing anything up)

For deployment you just need to copy the contents of dist into public on the server. (and not upload the symlink)

Was wondering why my script wasn't working. Added it to my node modules. Imported the style sheet with a require. Checked the gulp config file. Made sure it was in my pipeline. Checked my webpack settings and made sure jquery was loaded first. Checked my version on npm, crossed referenced with my package.json file. Why isn't it working....forgot to add the script tag in my html😤

What is the best PC spec for development?

Things I mostly work on: Node frameworks, React Native and some Java and C++ (QT)

I know that even a dual core is enough for this but it takes a while even for a webpack build to complete in my current build.

One thing JS does great is that everything from the server to the gui to the (extremely flexible) build system is 100% platform independent with very few platform specific bugs. And that's a big deal when a basic setup is 1200 packages from 650+ semi-coordinated people.

I can follow and am fine with the Vue documentation. I go crazy when I read online tutorials. I don't know webpack. I don't know ES6. I don't know nodejs. Arrghhh.

It is like all of a sudden I'm thrown into an English speaking courtroom as a lawyer or into a bunch of Brits.

Being a front end developer and working in a team of motivated "full stack" developers sucks big time.
So, recently joined this new company with a very small project which just started, basically a cloud version of a really old desktop app. Few people from the team completely from the asp dotnet background decided the architecture few months before I joined in.
So, they did it something like this -

- mono repo dotnet project with VueJs app served within it (because that would be maintainable 😑)
- vue app served by pointing the built files through dotnet index file (simply because they didn't care about the gift to the front end world which is webpack or even had any knowledge about it 😑)
- added typescript because, u know it's cool 😑, without even knowing that they don't possess that team which know how to write the types (f***ers write classes for every payload object coz they don't know what interfaces are)
- no loader to load typescript, they are running tsc in watch mode and we have .js and .js.map for every .ts file in our project which some teammates are even pushing to repo

Recently, I added eslint with git hooks to the project so that everyone will at least stick to the coding standards. Now, to avoid the errors they are bypassing the git hooks by uninstalling the library and then installing it after the commit😂😂
Then we have a girl who uses document.getElementById to programmatically change styles in a Vue project😑😑😑😂
Then we have dotnet people using dotnet coding conventions all over the front end app.

People, how do I deal with these so called "full stack" people?

Best: VSCode, Typescript, Webpack
Worst: mov ax, bl

Oh my god, I'm basically at the verge of self-destruction! I've been trying all day to set up a simple Node server with react, but it's never that easy, is it? You need Babel to transpile ES6 + JSX to ES5, and then you need Webpack for god knows what reasons, and there are so man configuration files and options, and there are 1000 tutorials with 1001 ways to do something. I've created probably 20 new project because when I complete a tutorial and try to do something on my own, all hell is loose and I get some cryptic error message and am unable to ever get it to work. Holy cow, I need a drink... Am I just a retard? Greetings from Norway, by the way!

Webpack is pretty dope 🤗🤗

Me: Let's try to implement this in js...

Also me: npm install webpack webpack-cli typescript --save-dev

FUCKING WEBPACK 😡😡😡

I fucking hate webpack and frontend development so fucking much, why do I have to see my site not loading the bundled JS code on production but being absolutely fine in dev? is like watching my mom being run by a car over and over and over while I try to remember how it all was before she gets run over, FUCKING STOP WEBPACK, I havent sleep but just 4 hours since yesterday, I NEED YOU TO WORK JUST AS YOU DID IN DEV WITHOUT THE PERKS OF HMR FFS, JUST FUCKING DO IT

If you feel it’s time to change I have a great job offer for you…
proceeds with offer with maximum wage that is half what you earn and by the way you need to know React, TypeScript, NextJS, Redux, NodeJS, ES6, Webpack, RESTful i GraphQL API
Nice to have is Python and Go

Girl you need to decide if it’s great offer or technology mishmash.
Hell no, glad you didn’t mentioned young and dynamic team cause I clearly see some dynamic technology stack there.

Company helps people find medical treatment clearly forgot about treatment on their stack.

Someone needs to tell them their tech leads are complete morons but since you’re not looking for head of technology it won’t be me lol.

One poor pepega like me will spend days optimizing a web app, reducing the bundle size, reusing components as much as possible to save space, carefully choosing the right libraries for the right jobs and doing some careful tayloring to bring them in line with your needs, choosing the right webpack plugins to compile everything exactly like you want and keeping track of every dependency to make sure nothing unwanted makes its way to the final product, caching results to avoid any unnecessary call to the server, then some random team leader randomly forces you to drop in jquery-era plugins just because they look nice and won't listen to a word you're saying.

I KNOW WHAT THE FUCK IS A SWEET ALERT; I DIDN'T USE IT FOR A FUCKING REASON.

What is this even supposed to mean

Trying to learn Angular and reactjs, reading up the tutorial or documentation...

Why the hell are there ten million more shit I need to look at first? (such as rxjs, Babel, webpack... and whatever the fuck they are)

Now am I supposed to master those ten million tools/libraries before I can proceed?

Of course there is no ten million but mentally it's no difference. I'm just fed up with this.

I was gonna read up about webpack 2 but when I blinked my eyes it became webpack 3 :/

Fuuuuuuuuuuccccccckk you gulp, you have one fucking job. Front-end web Devs this is a warning for all of you out there. Go with webpack always.

Just needed a good looking material os datepicker - ended up wrestling with react, webpack, npm and gulp. 3 hours later, ta-da, I have a datepicker! webdesign nowadays...

10 hours later...

"FINALLY, I'M DONE SETTING UP TYPESCRIPT CONFIGURATION"

I was heavily inspired by typescript syntax, but the configuration is as complicated as webpack. Damn you frameworks

I tried to learn Webpack for the second time in my life and ended up adopting RiotJs and discovering devrant. But still don't know how to setup a webpack correctly.

Now, everytime I want to discover awesome things, I will try to learn this stupid so called tool named Webpack

Oof, scope creep

Come back to an 8 month old project and I can't update the website because something in webpack needs something in python to compile... Um why. Literally just a poster with some images and a markdown parser.

So I spent 5 hours and 850 lines of code later modernizing the code and... I have the same website again but now it compiles. Woo?

Got an idea that needed prototyping, remembered that people always said Bootstrap is a good UI framework for quick prototyping. Had a doubt though, as the last time I checked Bootstrap sucks.

I ended up wasting hours to make it work with webpack. Turned out it still sucks.

The most irritating thing was they tell people to install the latest beta, or even alpha version on their website, not the stable one. Who the fuck would do that?

When you do the bare `npm install bootstrap`, it will install the latest stable version, but the docs page defaults to the... guess what, the latest beta version. I wasted nearly an hour just to figure out why the styles weren't working like the examples in the docs.

So i found ParcelJS today which is an alternative for webpack. which is interesting because i never bundle my shit

Sometimes I wonder if we invented WebPack just to have to compile and therefore have time to tweet shit around

Holy crap, just ran npm install on the vueJS webpack template. node_modules is 272.7mb with 21785 items :/

I have reinstalled node js 3 times to run JS scripts and "npm run dev" is not starting up the server. This is quite frustrating.

NEVER maintain multiple release branches as a maintainer, period.

Given enough PRs, nobody, not even god-tier maintainers, is able to keep track of all commits and the whole context/story behind it.

Remember that people ALWAYS PR against your master and nobody even cares about your whatever-named-next-branch buried deep inside your feature branches.

Please make it easy for others if you want actual contributions.

ES6 + flex everywhere in app without webpack, gulp etc...
Now app needs to support IE11
FML

I haven't done any front end stuff in a long time (last time was before jQuery was popular), and since I had some free time lately I decided to check out React and see what it's all about. Turns out that first I had to go trough one week of reading about node.js, npm, jsx, es6/es2015, babel, webpack (and probably something else), but I finally got to React. So far I had no problems with any of this but I have no fucking idea how most of this stuff works behind the curtains and I'm scared.

Babel and webpack kicked my ass today. fuck you babel, and fuck u too webpack. neither one of u fucks is making my life any better at the moment. things were moving along, now my app just looks like this. something in this transpile garbage. I'm not missing '>' . it's just not transpiling correctly I think.

When I first started reading about Angular 4 I must admit I was a bit excited. It seemed like it fit the company enterprise requirements. The improvements it offered on paper looked quite good for our use case. HOWEVER... After writing Angular 4 for two weeks I'm seriously doubting I made the right decision. Testing is a dependency hell and there are two ways to build and structure your application. The webpack way and the SystemJS way. The grunt way and the angular-cli way. For fuck sake Google. And the documentation is somewhat half supporting one thing, half supporting another. So when you're using angular-cli with webpack, you're pretty much screwed when we're talking about documentation. It has now taken me almost 50 hours to write a pretty basic Angular app, made it compliant with our staging environment and writing a Makefile for it, since I haven't been able to find any same way to provide custom arguments when building it with the angular-cli --aot option. So fuck you Google. Luckily I've found a way to modularize it so much that I'll be able to reuse the core in the future. So I guess I got that thing going for me, which is nice... -.-' *sigh*

Stay away from webpack people. Stay FAR away from webpack, please.

!rant but kinda

Rails 7 got rid of webpack and Node as a requirement, and for this I am super happy. I heavily disliked having to depend on Node for what is in fact a Ruby framework. I understood the need for it, and I always applaud Rails for being at the forefront of the web dev world and all of the trends that it contains. But maintaining both the node modules required, plus the gemfiles etc was just a big hassle for the simple projects I ever worked on.

This is coming from someone that actually likes JS and Node, but I am thankful this was decoupled.

The road to hell is paved with static typing, transpilers and bloated dev-environments.

Javascript I'm trying to love you I really do.

But what did Webpack do to my named capture groups?

Why the fuck nobody talks about Multi-page apps?! We went from a Web where everything was Multi-page server-rendered, and now everything for Web developers is "Single-page apps".

What about websites who can't do that? Not everything can be a single-page app. Only my uncle's restaurant website, or something which is TRULY a full app. No half choices.
If your website is a multi-page app/portal which actually PRELOADS data, instead of doing 100 fetch to an API within a page that is full of loading bars, well, your life is a pain.
When you want a first contentful paint which isn't a white page, well, your life is a pain.
What are React, Vue, Ember, Angular (let's exclude Svelte and Marko) going to do about Multi-page apps and SSR?

React-router sucks to me. It's performance is weak and it's useful only when you have an SPA with multiple sections which can be treated as pages (e.g. A single SPA divided in tabs).
Server-side rendering is the worst pain ever made by humanity, in React (and prob Vue, I didn't try but I can bet). And even when made easier from libs like Svelte and Marko, I (personally) can't get it to be faster enough compared to a traditional website without a JS framework and with a templating engine.
Anyways, if there's anything that I learnt from React, is to stay away from Next.js. Perfect, beautiful, mess.

All JS frameworks just seem to bloat the code and make it worse and slower, even though they're REALLY helpful.

Why? Why everyone loves them if their downsides are so clear? Why 3 projects out of 3 I made (1 React SSR, 1 Vue, 1 Marko SSR) are and will stay painfully slow and bloated, full of shit, even if in 2020 we should have evolved with the famous three shaking, with the famous lazy loading, etc.?

I am just frustrated.
And let's not even talk about Webpack, Rollup, Lasso, those module bundlers shit which are harder to configure and understand than finding a needle in a haystack.
Lasso was the easiest to configure but I anyways can't understand it. Webpack seems it was made to handle SPAs, as any tool in this freaking world, and not even considering an easy way to integrate multiple bundles for multiple pages (I know it's pretty easy, but with component sharing between pages and big unique bundles Next.js handles it soooo bad it feels like hell).

Am I the only one?

Sorry for the long rant. I just needed to rant right now.

I just don't get it. I've done web stuff for 20 years, but these days I'm expected to learn god knows how many command line tools just to stay relevant in the field. I fear the day I have to leave this crummy company making small websites, I just don't have what it takes to learn all that shit and get a job elsewhere.

Webpack, NodeJS, Angular... when I look at their docs I just get lost in all the jargon and I think to myself: I would rather stock shelves like a chum then learn all this goddamn shit over and over and over, my generation can't afford shit anyway so there is no point in doing the absolute minimum to survive.

Meanwhile the recruiters on LinkedIn all talk like the jobs they have are like a visit to fucking Disneyland compared to the soulless mindfucking grind a job entails. GAHHHH!

I fucking hate webpack, babel plugins, loaders, presets and yarn workspaces and lerna monorepos.

Fucking stuck for days on not being able to run a project, tried a lot of github issues solutions. Yes I did read the docs and articles.

Rust's DX is incredible. I previously published a couple packages to NPM and every step of the way i had to fight with NPM, Webpack, Rollup, Typescript and the mass of third party plugins for all of these that wired them together. Here it's literally just

cargo publish

Second night of my life wasted trying to get fucking Webpack to work. I just want a goddamn working dev server. I just want it to auto-refresh my browser, and yet fuck all happens if I use the "--hot" option for "webpack serve" in my npm start script (as described in the extremely terse and overwhelming documentation). How do the people from create-react-app configure this cancer? Jesus fucking Christ, this is all so overwhelming and extremely confusing, maybe I should quit web development altogether.

Hi friends and others. There is a task I want to automate. I want to convert .docx files to .pdf and then minify those. Are there JavaScript libraries or npm- packages which can do that? Because I would like to use Gulp or Webpack for this task. I would not mind if external APIs are involved, but I would rather not use those if not required.

Pls share your wisdom. Bye.

@tahnik so I surfed on over to devrantron's repo, and I had to say that I found that "gave up on hot reloading" commit hilarious, because I was looking at how to get it to work a few months back and was like "FUCK that shit"--it really spoke to me XD

Tested out parcel.js as webpack replacement and wasted 3 hours because of a missing sourcemap reference at the end of the bundled file. It was not parcels fault, but dear author of parcel-vue-plugin never again override one of parcels core file you fucker or i'll chop of your genitals with a rusty knife.

Worst architecture: the stack compiler I wrote. I basically just made my own shitty webpack.

The idea was simple: Babel to minified JS, Scss to minified CSS, and HTML to minified HTML. Made in Node JS, of course. (perhaps that’s where I went wrong!)

The thing works... and I use it... but boy is it bad. It even broke on my current project (which is for a client so...) and I’m having to work around my own god damn code.

I really need to revisit it and redo it.

I've been using webpack for a few months now but always using someone else's config. Today was the first project where I started from scratch with my own webpack config. Learnt a lot and it actually worked!

I am a frontend dev but please don’t trust me 100% with responsive, works in every browser, animation heavy, top of the line, UIs.

Also I don’t know how to work with Wordpress.

Also don’t ask me questions about Webpack, Node, or anything related to builds/configs. (I will be happy to google search my answers for you tho)

But I am a frontend dev.

Fuck webpack.
..besides that what really grinds my gears is the cloning of objects in js. I do like js, but why can't I just say object.clone ? Or Objects.clone(object)?
I mean deep down an object is just 1s and 0s and I just don't know why, there is no standard or nice way to do this. Would this be technically be possible?
Maybe someone knows more about this whole thing, would be happy to hear.

I am a fresher in web development. I have already learnt to use nodejs, react, angular, vanilla js and made many projects. Majority of the work I feel is just CRUD based, sure there are some exciting things but they are only of a small percentage.

All that innovation HAPPENING is just glorified way of making a CRUD APP ONLY.
Oh mvc worked great on server side let's bring it to client side
OH mvc is such a mess, who thought about doing this.
Oh react redux is so revolutionary let's remake our app using it,,
Oh es6 fuck yeah, Babel, webpack sure, now my crud app is super performant.
Oh graphql, motherfucking cutting edge CRUD APP......

I need to know what's next, is there any breaking of this cycle

I've learned webpack over the past years. It was a tough road.

Then I tried parcel....

.... I hope I'll work on a big project someday, to actually use my hard earned webpack skills again.

Don't you love when there's a teeny tiny little bug in your code that's not very important but you want to get fixed because you're a perfectionist so you start inserting log statements and it magically fixes itself and stays fixed even after removing the log statements? So now you have to live in constant fear that the bug will appear again and you will never be able to fix it.

Abfjancnancnamxhajd fuck this, fuck js, fuck webpack. It was probably a fucking cache issue but who knows, fuck everything.

Finally took the time to start learning Angular 2. I wanted to do it right so I set up the development environment with webpack. Man does Angular 2 take a lot longer to get setup properly versus Angular 1. I mean it's worth it to do it properly but it was a lot more labor intensive getting a good dev environment setup than I had anticipated.

Web pack can go die in a pox infected hole. I have spent the better part of a day trying to fix a non existent problem cause the slime covered spunk receptical that is webpack can not figure out that it should load changed fucking files.

lets throw away the JavaScript bundler....

All this talk of javascript fatigue, and yet when tools like parceljs come out people still regress to webpack... I don't get it

At last, after a year and a half working with legacy codebase, I got the greenlight from the seniors to refactor my team's app to modern front end technologies. You know, webpack, unit tests, component based architecture and shit.. I really love it!

My PM doesn't look as enthusiastic though...

I hate webpack so much sometimes. My path game is so weak lol.

finally picking up React JS. When setting up webpack I fucked up on the last step in the tutorial I was using which wasn't even needed it just made requiring CSS modules not need style!CSS! Infront of the file name.. everything prior was working beautifully and I was ready to start setting up React. after attempting to be more efficient I couldn't even get webpack to run and thus the test project failed to run on local host. Now to re watch bad tutorials that assume you know everything because they're still more detailed than the others I've found. :| ugh

I suck at DevOps at least as hard as I'm good at front-end/UX. I found out as a result of the local job market starting to get needy for 'full-stack'. Stuck for 2 days on setting up a Docker/ Dockerhub/ DigitalOcean/ Bitbucket pipeline with Nginx/ Node/ MongoDB Cloud & Webpack/ React.

*Sigh*

Upgrading frontend JS node webpack apps created from boilerplates or cli creators including versions in package.json

My brain already hurts only thinking about it.

Sass.

I'm using the @use directive to avoid bundling the same thing a hundred thousand times.

Sass doesn't give a flying fuck and bundles the same thing a hundred thousand times

Why you must hurt me like this

I have one full stack dev, who claims to know Python and Webpack, but the funny thing is that he is complete shit in anything he does
As he is working in office and I work remotely, CEO and CTO give all his doings a priority
The most fucking part was when he left a project for 2 weeks and when came back he told that nothing had changed.
... he didn't even look to the code, or running website, he just told thst nothing was done
I was so insane, that I told him almost everything I think about him
Fortunately, I am still on this job and he in not working on this project =D

Developing front-ends used to be about translating a business use case to an interface. Now I spend days and weeks getting tooling to integrate properly: webpack, babel, React, Vue, SSR, Nuxt, NPM packages, build & CI pipelines, storybooks, and resolving incompatibilities. It's become such a grind I haven't had a single satisfying, productive workday since 4 months.

I'm in love with Webpack but jeeeeeesus when it breaks in obscure ways maaaaan

Like, I got it working earlier, no errors, everything looks great... aaaaand website is blank. No page, no source, not even anything in the console, just blank. Over an hour later... turns out removing the output target fixes it. Why? No idea. Nothing.

Omg I loath path separators. Been working on windows most of the time (bought a surface pro for some reason) and my colleagues work on Linux. We just do standard web dev stuff nothing special but. I started having issues with my windows build getting weird function.prototype.bind.apply is not a constructor issue. Which is valid because apparently my colleagues started using the fat arrow function everywhere and on places where not needed.......

But on Linux they never had an issue because babel fixed it to the old function during the transpileee. So why the fuck am I getting this problem. After some tedious debugging and asking my colleagues. (colleagues only responded with just use Linux) I found the the issue to lie in the webpack loader for the Javascript in which the path regex used a single / :(. So I changed that to a group to be / or // and bam the whole bloody project works on windows now.

....... My colleagues still don't understand that they over use the fat arrow in the wrong places unfortunately

Why does every other tool in npm wants to litter their own stupid configuration file at my project root?

Question to the frontend devs: I'm currently trying to optimize part of our JS. How do sourcemaps influence loading/rendering Speed in the Browser?

In the `webpack.config.js` we use uglify as minimizer for js. It has the option `sourceMap` Set to `true`. Now as I understand it, this caused it to Inline a sourcemap inside the JS file (which leads to a slightly bigger file size and thus longer load time for the generated file...).

My Question: should sorcemaps be enabled for prod (minified) files? Why yes, why no? Do they help the browser parse the JS faster?

There's a hell lot to learn about webpack configs.... it's a different world in itself..

First rant!
Ah, npm... Lots of packages use ES6 syntax because it's nice to write, and then transpile to node-compatible code either with CI or a precommit script. Just spent a whole day trying to figure out what was wrong with my project, when it turns out I just had to tell webpack to ignore node_modules *except* for this specific package. Sigh.

Interviewer: why do you want to switch?

Me: nobody in the company could get webpack configured.

Gulp makes more sense to me than Webpack. I chose it. Please don't hate me.

The web dev front-end world is insane!!

webpack, babel, node, npm, sass, css, postcss, javascript, cypress etc etc.

It should be easier and easier to build web apps NOT harder and harder for each year!

All the JavaScript "thought-leaders" have shitted up the ecosystem so damn much. Everything is so goddamn over-complicated it really took the joy out of programming.

A new dawn of simpler tools will come and all this trash will disappear. And not tools abstracting the garbage underneath. This is the cause of the problems.

Everything you think is gold is shit.

React, Next.js, Webpack, GraphQL, etc, etc.

Question: We are planning to transition our old ES5 codebase to modern ES6/ES7 and even typescript.

What would be the build tool you would recommend if we want to start supporting ES6/ES7 and even Typescript?

Webpack, Vite some other?

This is a vanilla Javascript Project with large codebase it's been built using custom build tools like UglifyJS and UglifyCSS and of after lots of begging it finally got the green light to move to a more modern build tool and start supporting a more standard JavaScript Features.

Mainly I want to move to TypeScript but transition would be slow so the build tool would need to support .ts and .js as well, that is traspile both the .ts and .js into one final production build.

What build tool would you recommend for that?

I'm so tired of fs issues with webpack/react. fucking useless piece of shit. I look online and it looks like it's a pain in the ass for anyone actually using a modern stack. Literally just trying to use mailjet's API to send emails from a React app and I've been solving dependency issues for fucking hours because of the MANY node modules it requires. requires fs, dns, tls, and dgram for a FUCKING post request because mailjet makes you use their node package.

Just read a rant about webpack and suddenly the hate boiled up again ...
Why is it just so damn annoying to configure?

Just make it like gulp or so where you have an actual idea on the workflow, rather than just throwing in plugins at random and let magic happen without knowing wtf is going on.

Tried to update an ejected Angular4 project to angular 5 ... after 2h i gave up and dropped some stuff to use angular-cli again.

That Moment when you struggle to get your Webpack config running on Windows, while it's works perfectly on linux.
And after hours of asking Google for help, which brings you no step further, it suddenly starts working. WTF??

I hate it when people name fancy new techniques but don't actually know what it is. Today I had the following conversation with some of my ClassMates:

Me: Whe should bundle the js and css files of our app
CM1: I used Gulp before, maybe we could use that
CM2: I used Grunt in the past, but thats kinda old-school webpack is what everybody uses now
CM3: I heard Docker is also a great tool for doing webstuff, let's use Docker

@ everyone who keeps pushing Vue via node

Vue via npm:
- shit
- bundling so you can save 15% on car insurance
- webpack/etc to condense your 50TB node_modules folder
- have to deploy, if you're in the US then it'll probably be in the middle East or maybe North Korea if that falls out

Vue via script tag:
- works awesome
- pretty feckin fast
- can be deployed purely static
- easy debugging from dev console
- easy templating for frontend
- can use existing html/css
- easy to work in teams with people without having everyone install npm
- if you have a designer they will love you for making it easy to style things
- you can cache it and make it offline without any of the new bullshit vuex
- you can use vanilla libraries without a mixin, polyfill, bundler, or etc anus

Fuck you, webpack, just fuck you! Took me three whole days but finally you were the one who gave in. Take that and build!

PhaserJS + Webpack = hours of misery and frustration. :P

Time to single-page this and refactor to Webpack later.

Today I had to fix a bug and it took me about 2 hours to find out that it related to a bug in a component which doesn't belong to the bugs component. In development everything where fine. But after deployment the bug occured. Found out that when running Vue webpack projects in dev it handles errors different, kind of a global try catch block. After deployment the application breaks.
This teached me again that we should not ignore any red error line in console.

So `aws-sdk@^2` happens to include an ancient polyfill `url@0.10.3` which breaks webpack, specifically fork-ts-checker-webpack-plugin, causing it to warn about the inexistence of class "URL".

And this is the default included package for AWS Lambda node.js runtime.

wow, just wow.