Guide - Get started

[bebraw]

Stub.

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

---

To quote @logaretm from #29:

Maybe it should cover:

• What is Webpack? (in a small paragraph)
• Establishing Mindset (JavaScript file as entry point) or how it works at its highest levels, some colleagues had issues understanding how it works since they were using gulp.
• Files and Loaders (in two or three lines).

Then move on to a small example:

• Installation.
• Basic html page with an entry point, that just logs something or manipulates an element using jQuery.
• Bundling the JS files.
• Extracting chunks (like vendor) with CommonsChunk plugin.
• Adding CSS (css loader and style loader).
• Adding static resources like an image (file/url loader).
• Optimization (Uglify, Clean).
• HMR.

probably that would be somewhat enough to get used to most of Webpack concepts at a high level. I'm not sure if its too short or a bit long.

Probably some short version of this post.

[Awk34]

Note: Apparently the 'What is webpack?' section of the current 'Getting Started' is confusing to many. Maybe it needs to be simplified even more from where it is now?

[bebraw]

Yeah. That's a valid point.

I took a historical approach in my intro chapter to webpack. Maybe a similar idea would work here so you get the context before digging into webpack itself. If you don't understand the past, it's hard to appreciate the ideas.

[Awk34]

@bebraw Nice article! I think that is spot on. Many people don't understand what Webpack is meant for.

[bebraw]

I'm thinking a structure like this would work:

1. Bit of history for context (adapt from above and link if someone wants to read more).
2. Basic features of webpack. This would be a good place to link elsewhere in the documentation and show how the bits go together (loaders, plugins, entries, output) on a basic level.
3. Brief comparison to show what tool to use and when. This shows webpack in context and highlights alternatives. For some usage a simpler tool like rollup could be completely enough. And this gives a better idea of how Grunt, Gulp, and such fit in.

Actually now that I think of it, we probably want a 5-10 minute intro to webpack. The current documentation has something. It would be a technical sibling to this first one and would show the basic concepts in practice.

[bebraw]

FYI, I added a stub for 10 minute introduction.

[pksjce]

I would like to pick this up. Looks like its not been taken by anyone yet.

[bebraw]

@pksjce Sure, do a quick draft at first of the planned structure so we can avoid a bit of effort. 👍