Guide - Concepts

[bebraw]

Stub.

Feel free to comment here if you have ideas on what this guide should cover. Link to potential resources too.

[TheLarkInn]

Have talked a few times on this. I think the learning cam be structured into:

• entry
• output
• loaders
• plugins

Ideally we'd stub these out separately. Maybe

[mxstbr]

Any snippets written somewhere @TheLarkInn? I recon those would be really helpful.

The TL;DR as far as I understand is:

• entry: Specifies the files that webpack starts from and builds a dependency tree. Each of these can (must?) build a separate bundled file with all of the dependencies included.
• output: Specifies the format of the bundled file, including naming, exports, etc.
• loaders: Functions which certain files can be ran through. They help webpack understand certain types of files. For example the css-loader for CSS files.
• plugins: Extend the webpack functionality and can be customized by the user.

Does that seem about right?

[bebraw]

My current prototype has an entire section for concepts.

[mxstbr]

Ooooh nice, I love the Everything is a module section, that took me a while to get!

[TheLarkInn]

https://docs.google.com/presentation/d/10mIapWjv1pyUQaMv6G8MCdoe9OK2Ey8zz-CLkHuFdRI Also has my slides with maybe valuable details or metaphors etc.

[pksjce]

Wow! That's a very good explanation of how plugins and loaders work.

On Sunday 10 July 2016, Sean Larkin notifications@github.com wrote:

https://docs.google.com/presentation/d/10mIapWjv1pyUQaMv6G8MCdoe9OK2Ey8zz-CLkHuFdRI
Also has my slides with maybe valuable details or metaphors etc.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#33 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AAZd9Oy1FqXYE2yPRD6mJYaWZOzqyyqKks5qUSKCgaJpZM4JF7IH
.

Regards,
Pavithra.K

[markerikson]

Had an extended discussion in Reactiflux with someone who was struggling with the idea of process.env.NODE_ENV, how it's used in optimizing client-side libs, and how it actually relates to Node itself. Seems like this would be an excellent set of concepts to add to Webpack's docs. I realize it's not strictly a Webpack-specific concept, but it definitely shows up in most "real" Webpack configs, and I'm not seeing any blog posts or discussions that really clarify how the value of NODE_ENV is used in client libs, how DefinePlugin+UglifyJS optimizes those, and how people usually associate the value of NODE_ENV in their Node build script with the value in their transformed client code.

I've exported the extended conversation I had to a gist over at https://gist.github.com/markerikson/ead940a93a2a877dc97824e5f839840f. I think the summary explanation I put together for how these pieces relate is useful, and the points made by Steven regarding familiarity with these concepts and having the docs include a friendly "here's EVERYTHING you need to get started" are fairly reasonable.

I've also put up a shortened version of the conversation with just my explanations over at https://gist.github.com/markerikson/6776848172c33aaa4db882627c689e18 .

[ojacobson]

Who's the audience for the guide?

I'd be tempted to start at a much earlier point than bundles and chunks. People coming into Webpack from browser-only development don't have all of the intermediate concepts yet:

• introduce the idea of a module and the use of the require function to express dependencies,
• explain some of the rationale and demonstrate that it's useful (possible examples: jquery-as-a-library, maybe?)
• introduce the idea of a bundle (a single javascript file containing many modules, plus the code necessary to load them). People coming in from Node or Browserify can start here.
• re-introduce the idea of an entry point - JS developers will already be familiar with them, Webpack changes the context a bit but doesn't fundamentally alter the idea

Once users get from zero to simple bundles, then elaborate onto kinds of sources other than pure javascript by explaining loaders and plugins, production builds, etc. - all of that is very high level and may even deserve its own "Production Builds" doc.

[TheLarkInn]

I agree with @ojacobson. Having a visual analogy even that depicts that dependencies in a web application are not limited to javascript files. Urls referenced in css, url's referenced in html, @imports in css to other files, etc. (Because webpack treats everything as a module). Explaining that webpack helps solve a web applications complete dependency tree etc.

@ojacobson, if I make a "sub"-issue from this one, would you be willing to write some of this introductory to webpack concepts in the issue for pseudo review.

[ojacobson]

I can take a crack at it during the week, I think.

[TheLarkInn]

#38 For you!

[bebraw]

I split this up into an entire section. There's also a label.

Let's leave this issue open for discussion, though.

[bebraw]

Time to close.