webpack appreciation station

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > YOSPOS > webpack appreciation station

akadajet: Sep 14, 2003

hell yeah! webpack. it's just so...

...ugg can't even pretend with this thing. yeah it's pretty much garbage. better than browserify tho.

# ? Sep 26, 2017 01:49

Adbot: ADBOT LOVES YOU

# ? Apr 26, 2024 13:04

Doc Block: Apr 15, 2003; Fun Shoe

wtf is webpack :cmon:

# ? Sep 26, 2017 02:09

Doc Block: Apr 15, 2003; Fun Shoe

*looks up what webpack is*

# ? Sep 26, 2017 02:25

There Will Be Penalty: May 18, 2002; Makes a great pet!

webpack is hipster premature optimization bullshi

# ? Sep 26, 2017 02:30

akadajet: Sep 14, 2003

Doc Block posted:

wtf is webpack

it's the javascript version of maven!

# ? Sep 26, 2017 02:54

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

old style js <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> and maybe a <style> <style>

new style js <script>

because webpack made that script and included some npmjs packages and probably ran babel

its good

# ? Sep 26, 2017 09:37

Condiv: May 7, 2008; Sorry to undo the effort of paying a domestic abuser $10 to own this poster, but I am going to lose my dang mind if I keep seeing multiple posters who appear to be Baloogan.

With love,
a mod

akadajet posted:

it's the javascript version of maven!

actually it's the javascript version of maven's shade plugin

i'm glad javascript is finally getting functionality that java's had for 10 years

# ? Sep 26, 2017 10:01

akadajet: Sep 14, 2003

N.Z.'s Champion posted:

old style js <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> and maybe a <style> <style>

new style js <script>

because webpack made that script and included some npmjs packages and probably ran babel

its good

yeah, I like build tools. webpack's output isn't the easiest to debug tho.

supported currently in chrome....
<script type="module">

can't wait for our in-browser js module future

# ? Sep 26, 2017 14:36

There Will Be Penalty: May 18, 2002; Makes a great pet!

N.Z.'s Champion posted:

old style js <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> and maybe a <style> <style>

new style js <script>

didn't realize webpack got rid of <style> blocks?

akadajet posted:

yeah, I like build tools. webpack's output isn't the easiest to debug tho.

i think webpack can generate source maps or are you talking about something else?

# ? Sep 26, 2017 22:02

JewKiller 3000: Nov 28, 2006; by Lowtax

why would you write javascript when you could not do that

# ? Sep 26, 2017 22:09

akadajet: Sep 14, 2003

There Will Be Penalty posted:

didn't realize webpack got rid of <style> blocks?

i think webpack can generate source maps or are you talking about something else?

it does generate source maps, but I've always had problems with them. especially with code that uses async/await

# ? Sep 26, 2017 23:16

NoneMoreNegative: Jul 20, 2000; GOTH FASCISTIC
PAIN MASTER

shit wizard dad

Dude I don't care how nice your lawn is we don't do racism in YOSPOS.

# ? Sep 26, 2017 23:32

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

There Will Be Penalty posted:

didn't realize webpack got rid of <style> blocks?

it can, from the server generated html

so in your js module you might import './blah.css'; (css module) and then webpack can be configured to either

1. build a static file named blah.sha1.css and update the html to point at <link href="blah.sha1.css"> like a conventional css reference, and the browser downloads and parses that even if it doesn't use the styles, or

2. include the css as a string in your javascript bundle (so the server html just includes <script> but not <style> or <link>, which is what i was referring to) and when that javascript module loads it will use a css loader to dump the string of css into a <style> in the dom.

the later option works really well with code splitting, helping avoid unnecessary work for the browser as it just won't load unused js or css (it will lazy load them instead)

N.Z.'s Champion fucked around with this message at 00:11 on Sep 27, 2017

# ? Sep 27, 2017 00:03

tk: Dec 10, 2003; Nap Ghost

I appreciate that webpack hasn't caused me any trouble after getting through the initial setup.

# ? Sep 27, 2017 06:55

Moo Cowabunga: Jun 15, 2009; [Office Worker.

Doc Block posted:

wtf is webpack

# ? Sep 27, 2017 06:56

Amethyst: Mar 28, 2004; I CANNOT HELP BUT MAKE THE DCSS THREAD A FETID SWAMP OF UNFUN POSTING
plz notice me trunk-senpai

front end is a loving nightmare. want to try react? install 50,0000 dependencies using one of 3 terrible build tools

# ? Sep 27, 2017 07:26

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

just use facebook's boilerplate...

code:

npm install create-react-app -g
create-react-app my-app
cd my-app
npm run start

then edit src/App.js and every time you hit save it'll autoreload the app

it handles webpack for you

# ? Sep 27, 2017 08:37

akadajet: Sep 14, 2003

N.Z.'s Champion posted:

just use facebook's boilerplate...
code:
npm install create-react-app -g
create-react-app my-app
cd my-app
npm run start
then edit src/App.js and every time you hit save it'll autoreload the app

it handles webpack for you

i don't use facebook products

# ? Sep 27, 2017 14:23

CRIP EATIN BREAD: Jun 24, 2002; Hey stop worrying bout my acting bitch, and worry about your WACK ass music. In the mean time... Eat a hot bowl of Dicks! Ice T; Soiled Meat