WebpackNative, an alternative to asset pipeline and webpacker gem

Why I don't like webpacker and the asset pipeline

I should start with honesty, I own an old 2 core computer (yes I'm old), and using webpacker on it is a nightmare, it's slow and I have to wait for so long just to see my Javascript getting compiled, this is not the only reason why I don't like using webpacker gem obviously, but using vanilla webpack is far better than using webpacker, you can see how FireHydrant dropped their build times from 8:15s to under 3s by switching from webpacker to vanilla webpack, they wrote a pretty good article about it: https://firehydrant.io/blog/rails-without-webpacker

The asset pipeline is another issue I see people facing in their daily work, if your compilation fails in production for any reason, you have to open an issue in the GitHub repo and wait forever (kidding but maybe a week or more)... hopefully, someone from the contributors will reply, or ask you for more details, but in a world where shipping products should be done fast, you don't afford to wait for the largest of someone else to solve your problems, you should use a tool that just works (with a highly active community) webpack is such tool.

So if you ask me... why I created this gem? I will answer, for 2 reasons:

1- I want to take control (Webpacker gem is slow and complicated for me, asset pipeline behave strangely some times) and using both is a probability x2 to have an issue with one or another.

2- I love simplicity, I see people creating complex gems than it should be, looking saavy has no interest to me, I love simple things, yes keep it simple, stupid :)

So what I wanted basically is to have all my assets files in one place, ready to be compiled on the go, and if I need to have a custom configuration, it should be right there in a configuration file, webpack has a file called webpack.config.js where you can configure everything you need, for those who still strugle to understand webpack, I have written a beginners book about webpack where I detailed all the basics to know in order to use webpack and the config file effectively.

How webpack_native gem works?

WebpackNative gem is not magic! it just copy a Ready-To-Use asset folder called webpack_native under your app/ folder, this folder has the webpack.config.js file and the package.json file where all your module dependecies are listed (once installed the node_modules folder will be added there as well as package-lock.json), if you know webpack then you already know that these are the basic files needed to work with, the other folder you will find there is the "src" folder, that's where all our assets will go. Under the "src" folder you will find the classic javascripts, stylesheets and images folders, I guess you are already familiar with these :)

Is that all? no but the previous added structure is the major and important thing needed, it's right there where you will write your frontend code as well as extra configuration if you need it, nothing complicated, just simple basic webpack folder.

What's remaining is just some helpers to output the javascript and stylesheet tags, these are added by the gem to your views/layouts/application.html.erb as follows:

<%= webpack_stylesheet_url 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

<%= webpack_javascript_url 'application', 'data-turbolinks-track': 'reload' %>

For images, you just have to put your images under webpack_native/src/images and use them in your views as follows:

<%= webpack_image_url('image.jpg') %>

So basically, what webpack_native gem will do, is to create a simple basic structure where you put your assets, and it provides you with some helpers to output the necessary HTML tags, it's simple as that!

The output files

During your development (in production as well), all your assets will go to your app public/webpack_native folder, and because the configuration is set to the "development" mode by default, your code will be uncompressed, in case you want to compress it for production usage just run:

rails g webpack_native:prod

This is simply a method that execute the following:

cd app/webpack_native
npm run build --mode=production

Use whatever you like, at the end it's just vanilla webpack, and the first way is just a helper generator that will save you some typing.

The usage of webpack_native gem can be found here: https://github.com/scratchoo/webpack_native

Please follow the instructions, use it, see the difference and let me know what you like or not like about it.

At the end, it's all about giving back to the community, at scratchoo we believe in sharing everything useful we work with for ourselves, webpackNative is the new tool we built to speed up our development, and we are excited about it, so share it with friends if you think this is something that can benefit them as well.