I'm using a custom site generator of my own known as Antwar to generate the SurviveJS site. It's actually based on Webpack and React and is fairly feature complete. I'm running it in a private beta at the moment but wouldn't mind pushing it a little further.

What would you think of porting the project to use it? I don't mind doing the work. It takes a certain amount of configuration to map the content to the site but after that it's fun to use. This would be a good excuse for me to get a stable version out as well.

Stub.

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

Stub.

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

This is to stub and rewrite the existing page

Stub.

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

This is probably the best example on how to use this Plugin with webpack 2. (Thanks to @sokra).

webpack/webpack#2783

Document needs:

• Link to "What's a ContextModule? ContextModuleFactory?"
• Explain this scenario in a generalized term, then reference the example above, (or create a new one).
• Explain what each of the properties represent and how it relates to webpack.
• Caveats (if any)
• Interop with other Plugins, or properties in webpack config (I believe maybe the contextRegexp props under module?)

Stub.

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

Stub.

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

Stub.

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

This will be the either the splash page for the Guide Concepts page. Linkable sections to each "Core Concept". On this page we need to present to users a first time approach to why webpack is needed to solve the common problems with dependencies in web apps.

• What is a dependency (1-2 sentences)
• What is a dependency to webpack? (2-3 sent. ?)
• What is a dependency tree? (1-2 sent.)
• How does webpack treat the dependencies? (2-3 sent.)
• How does webpack differ from a module loader (IE. SystemJS) (2-3 sent.)
• Why large bundles? (2 sent. ?)

CC @ojacobson

I noticed the npm scripts run through sudo. I don't think that's needed so might as well drop those bits.

You actually need to change the output path to form path: 'dist/build', at config/dev-config.js as otherwise it will try to write to root. One reason why sudoing isn't a good idea here.

Stub.

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

Please make sure that I can build this project too.

• no linux tool in npm script
• path.join instead of a/b

Situation

People are using Webpack because every React tutorial have Webpack as its module bundler. Some of them are beginners, some others come from Angular with experience in browserify.
I've seen a lot of beginners struggle with bundle sizes. And even though everything looked fine. Something was off. Some sorting in the plugins array messes up the final size.
I detected this from people coming from Angular. Since most of angular tutorials/examples don't have webpack in it. Usually they try to extend the default config with the prod config and if the order is not correct, the bundle size incease and you have no clue of what's going on.
I've seen it several times.

Issue

Documentation does not clarify about plugins load order.

Solution

Detailed explanation while handling plugins in Webpack.

The complete plan is:

• For development this is just a normal react application (client-side rendered).
• For production this repo builds into a prerendered site with client-side javascript applied.
  • Why? search engines should be able to index the documentation.
  • How? react-router with async routes, static-site-generator-webpack-plugin/Antwar, entry point per route.
• It's published to the webpack.github.io repo. (Best via CI, codeship?)
  • This allows use to override webpack.github.io/docs when no webpack/docs repo exists. OR we remove the gh-pages branch and use the wiki as old docs.
  • We will rename the webpack/docs repo to webpack/old-docs once the new documentation ships.
• Server-side elements are added via gordon with AWS lamdas + api gateway once needed
  • Not needed for the documentation
  • But will be needed to future stuff...

Stub.

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

Stub.

Here is a great write up on a lot of the features of the DLL Plugin (I cannot figure out how to anchor to specific posts on bountysource, but it's near the bottom)

https://www.bountysource.com/issues/28615391-webpack-incremental-builds-are-slow

The biggest point for me is that it cannot be used with CommonChunksPlugin, but there is a lot of good information in the post as well!

Disclaimer: This is my first time submitting to webpack.io, let me know if there are certain conventions I should be following!

Stub.

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

Stub.

• include changes to the resolver
• babel/treeshaking
• ...

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

Stub.

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

Reference: https://webpack.github.io/docs/loaders.html

Stub.

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

(Stub probably needed.)

Story
As a webpack user and developer, I would like to understand how to create & implement a custom loader using the webpack loader API.

Scenario
Given I visit the page:

• A. I'm presented with clear indication this document contains info on the webpack loader API.
  • What is a loader? (Via link or short description)
  • What arguments can a loader be provide?
  • What is this? How does it relate to the loader?
  • How and Why to add support for source mappings.
  • Best practices on writing good loaders (provide examples simple to complex)
    • Writing unit tests for loaders
      • Provide 'boilerplate test suite' for developers that has CI, Coverage, and testing setup.
    • Setting up a loader for publishing on NPM.
  • Loader changes from 1.x to 2.x how to migrate.
• B. I'm provided with link and reference to the webpack Loader 'overview page'

Stub.

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

Stub.

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

Just merged a feature into develop containing some preliminary work on the splash page. Here's some thoughts:

Header Section

I found, forked and tweaked the floating squares animation from a pen I found. I kind of like where it's going but I think we should probably use the SplashNode components (used in the visualization) as the floating squares instead of the blank ones. I'm also not sure how much I like the "Webpack Module Bundler" title, I think I might just go back to a giant Icon (the cubes) I had in the mockup. Maybe have all the different module types floating inwards towards the Icon or something?

Catch Phrase

Starting to lean towards removing this section as mentioned by @jhnns in the initial redesign issue. I couldn't get the positioning or animation perfect and even if I could I'm not sure how much it really adds to the page. If we do decide to keep it, it definitely needs some work.

Visualization

I really like how this is coming out. I'm trying to create components for most elements, instead of just using images, so it's easier to do a nice animation down the road.

Quick Start

The markdown file should be pulled from the content folder when finished, just needed something to play around with for now. I tried a few highlight.js themes. While I'm not really in love with the chosen theme, I don't think it'd be too hard to create a custom theme if we wanted to. My feeling is that this component, and maybe a few others, can basically be used as the main building block for most of the content throughout the site. However it would obviously need a lot more boilerplate CSS to handle blockquotes, headers, and anything else that might be in the markdown.

Any advice on markdown parsing would be helpful, I tried using the react markdown loader to bring it in as a stateless component with no success.

I'm going to push a separate repo tomorrow for the design assets, just so it's out there if people want to poke around. I'll try to update the splash mockup to show what I'm thinking about the header section. Any thoughts, concerns, feedback etc would be much appreciated 😉

Stub.

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

Stub.

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

Stub.

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

A curated list of starter kits that get you started for a Webpack-based project:

• Angular Full-Stack Generator
• Angular2 Webpack Starter
• NG6 Starter
• React Starter Kit

Stub.

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

Reference: https://webpack.github.io/docs/multiple-entry-points.html .

Stub.

Overview Page: Give Overview of what this section will cover.

• Explain Schema and Type notation used in guide.
• Tapable
• Compiler instance
• Compilation instance
• Module
  • Module vs ModuleFactory
  • NormalModuleFactory
  • ContextModuleFactory
• NMF instance
• CMF instance
• Maintemplate instance
• Parser instance
• Resolver instance
• Recommended Reading
• Implementing Custom Plugin Hooks (like html-webpack-plugin)

WIP

Stub.

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

WIP

I think this would help a lot of people. Both tools try to accomplish similar things, though using very different concepts.

User story
As browserify user I want to easily be able to migrate over to webpack. I want to generate (transpiled) javascript bundles and set up a local development environment.

Hints

• Keep it simple
• How to generate a production bundle
• How to setup webpack-dev-server
• How to transpile ES6 code with babel

I would consider everything beyond these as "advanced".

Stub.

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

Stub.

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

Stub.

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

Stub.

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

Stub.

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

Whenever we merge something to the master branch, it should run npm run deploy to make the changes visible. Here's the basic idea on how to achieve that with Travis.

Stub.

With the performance increases coming in the Docker Beta ( now public ) web development in an isolated Docker environment has not only become practical but extremely useful.

Goal: Guide to setup & configuration of both Docker & Webpack2 with examples covering all aspects of the development workflow using Webpack2 from dev build to prod bundling as well as dev server, watch, hmr, tree shaking & so on.

@bebraw - Assuming you like the idea, could i get a stub for How To - Docker and I will begin to outline the proposal in detail ( already have a whiteboard full of notes, concepts & examples ).

IMO this document, given it's scope should live outside of How To: Use with third party tools 74b90c4

//cc @TheLarkInn

Searching for webpack errors on stackoverflow is more difficult than with other libraries because the error messages are often very opaque, and they use common words that are also used by other build systems and libraries.

I would love to write a document like "twenty possible reasons you might get the error 'Module could not be built'".

I envision the page as a list of common error message. Under each one we would catalogue the various reasons why that error might occur.

Stub.

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

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.

Stub.

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

Stub.

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

Stub.

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

Stub.

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

Stub.

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

Stub.

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

Because it's very easy indeed!