I had been a little fuzzy on how to explain webpack, so I did some more research to get a clearer picture. Essentially this is what webpack does: It takes modules with dependencies and turns those into static assets. Said another way, webpack takes all of our assets and dependencies and creates a bundle that is ready for production. Awesome! Check out this illustration to get a better picture:
You can probably already guess what can go wrong with this. The order of these script tags is very important, errors can pop up from a wrong hierarchy, certain functions may be called before others or variables can be overwitten. In addition to that with all these files you are making a lot of HTTP request, which can greatly reduce the speed of your application.
Webpack to the Rescue
- Ruby 2.2+
- Rails 4.2+
- Node 6.4.0+
Getting webpack to work with you new Rails app has never been easier:
rails new myapp --webpack. This command creates a new Rails app with a few caveats. If you look at your folder structure you will find a new folder
To learn more about the file structure and how to integrate webpack into an exisiting Rails app, check out this Webpacker Readme.