webpacker_guide.md

Webpacker

What Is Webpacker?

How is Webpacker Different from Sprockets?

Installing Webpacker

Integrating Frameworks with Webpacker

Using Webpacker for JavaScript

Where to Place Files

Linking Files

Babel and TypeScript

Using Webpacker for CSS

Using Webpacker for Static Assets

Webpacker in Rails Engines

Running Webpacker in Development

Webpacker in Production

Deploying Webpacker

Webpacker and Docker

Extending and Customizing Webpacker

Troubleshooting Common Problems

Upgrading Webpacker

I like the outline!
Maybe we could add a small section: Sprockets vs. Webpacker or Comparing Sprockets against Webpacker, to help understanding the differences and similarities between both approaches?

Thanks for putting together this outline!

❓What do you mean by “Linking files”?

I like the idea of comparing Sprockets and Webpacker from @codergeek121. What does each one do similarly (and differently), why choose one or the other, why are both packaged in Rails? The react-Rails project has an effective section on this subject as a starting point https://github.com/reactjs/react-rails/wiki/Choosing-Sprockets-or-Webpacker

One goal I hope for the guide would be to help developers form a proper mental model of Webpacker and webpack and how it all fits together with Rails. I’m not sure that warrants an explicit section but perhaps it is a theme that threads throughout the guide.

It feels like there needs to be a section for Local Development as well, for things like compile: true, webpack-dev-server, Webpacker in test. (Edit: must have missed this was represented)

It may be worth providing some brief webpack introduction and a few advanced topics. Perhaps enough to provide context within a Rails project and linking to the webpack docs for more information where appropriate. Just a few ideas:

• how to install libraries with yarn
• understanding import/require() (as compared to Sprockets directives)
• understanding entry points (i.e. packs)
• how to use the webpack-dev-server and why
• use loaders/plugins for handling legacy JavaScript, especially jQuery plugins
• the role of the of the manifest.json file
• the benefits of webpack splitChunks for caching and page-specific JS

Other random thoughts:

• debugging tips
• common config recipes
• webpacker.yml and ENV var overrides

If you need any help, I also have some spare time to help collaborating on this guide. Like you said on https://discuss.rubyonrails.org, maybe it's best if you'd make a repository out of this guideline and if you want we can collaborate there.

I started to write my ideas down here:
https://github.com/codergeek121/rails/blob/webpacker-guides/guides/source/webpacker_overview.md

❓What do you mean by “Linking files”?

I think @noelrappin means requiring and importing other files with webpack here?

One goal I hope for the guide would be to help developers form a proper mental model of Webpacker and webpack and how it all fits together with Rails. I’m not sure that warrants an explicit section but perhaps it is a theme that threads throughout the guide.

I think so too, maybe one or two sentences on the decision on why Sprockets and Webpacker helps a lot against some confusion about the topic.

Perhaps for beginners - How to find / install / use a common JS frontend library from Yarn

When writting a simple app with no complex frontend, just some jquery and some plugins for it, I find it hard to figure out how to make things work. Making it so that a <script type="javascript"> in a view (so not in the webpack context) can work and use jquery and the plugins is not obvious at all.

In my mind, this is the simple, basic, initial use case of rails. But with Rails 6 (webpacker), it is no longer trivial to do. I think the guide should explain how to do that too.

noelrappin/rails_javascript_documention_drafts#1

https://github.com/noelrappin/rails_javascript_documention_drafts/blob/master/webpacker_guide.md