Guide - Concepts about webpack.js.org HOT 13 CLOSED

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

from webpack.js.org.

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

from webpack.js.org.

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 .

from webpack.js.org.

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

from webpack.js.org.

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?

from webpack.js.org.

My current prototype has an entire section for concepts.

from webpack.js.org.

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

from webpack.js.org.

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

On Sunday 10 July 2016, Sean Larkin [email protected] 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

from webpack.js.org.

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.

from webpack.js.org.

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.

from webpack.js.org.

#38 For you!

from webpack.js.org.

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

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

from webpack.js.org.

Time to close.

from webpack.js.org.