In this post, I'll try to explain some basic concepts and ideas from the point of view of a Rails developer used to working with the Assets Pipeline, comparing how to do the same thing on both.
- Webpack is a bundler that runs on NodeJS.
- Webpacker is a gem that helps connect Rails with Webpack.
- Sprockets, like Webpack, is an assets bundler and runs on Ruby.
- Sprockets-Rails is the gem that connects Rails with Sprockets.
- Asset Pipeline is the term used by Rails to refer to the use of Sprockets-Rails to handle assets.
There are more solutions for this like Rollup, Parcel or Browserify. I won't cover those here.
Rails.application.config.assets.precompile += %w( admin.js admin.css )
By default, you have an application.js file there, but you can add an admin.js as well. For example:
// here you can add all your code or require other files
Now, when Webpack compiles your assets, it will emit application.js and admin.js.
You can also create .css (or .scss if you prefer) files to be emitted:
@import some_sass_module // you can use SASS imports
And now Webpack will also process, compile and emit an admin.css file.
There's a caveat when using a CSS pack, I'll comment on that later when I talk about images.
Note that ALL the files under /packs will be emitted. You don't want to put all your source files there, only the ones you are going to access directly! All your source files should be in the parent folder or in a sibling folder.