DEV Community

Cover image for How-to Build Your Own React Boilerplate with webpack 4 & Babel 7

How-to Build Your Own React Boilerplate with webpack 4 & Babel 7

Seth on October 22, 2018

So you’ve learned some React and built a few things. You’ve probably used create-react-app or react-slingshot to get off the ground quickly with mi...
Collapse
 
bgadrian profile image
Adrian B.G.

Let me guess, you have over 1200 packages in your boilerplate ...

npm hell

PS: you realize that the code snippets are pictures and cannot be copied, and that border actually takes at least 2 pages length. It makes the readers life harder than it should be.

Collapse
 
_bigblind profile image
Frederik πŸ‘¨β€πŸ’»βž‘οΈπŸŒ Creemers

As much as I enjoy that cartoon, watch out with being snarky when giving feedback. Intent is often hard to convey in text. In a similar way, your PS might be more effective if it were stated in a more constructive way.

I do agree, though, with you that adding code snippets as images has many drawbacks. Apart from preventing the user from copying the text, and making the article longer, they also prevent users with screen readers from accessing the code (Yes, some people use screen readers to read code, as weird as that might sound :)), unless you add the code in the alt attribute.

Collapse
 
itzsaga profile image
Seth

Thanks for that thought! I'm trying to be more cognizant of accessibility and did not think about that at all. I'll be looking into this more and trying to figure out which is better moving forward then I'll update the post.

I actually got the idea for images from Learn Ruby The Hard Way where the author states:

You must type each of these exercises in, manually. If you copy and paste, you might as well not even do them. The point of these exercises is to train your hands, your brain, and your mind in how to read, write, and see code. If you copy-paste, you are cheating yourself out of the effectiveness of the lessons.

I just took it a step further and made it impossible to copy and paste.

Thread Thread
 
bgadrian profile image
Adrian B.G.

I just took it a step further and made it impossible to copy and paste.

That make sense but the article seems way too long and heavy, and the borders only adds to the pain.

To learn how webpack works I built a boilerplate too, but I never considered to follow a tutorial. The purpose was to read the official documentation and learn how and why they are build and figure out how should I connect them.

Collapse
 
itzsaga profile image
Seth

Hey BG. Thanks for reading :-)

805 packages actually ;-)

Trust me, it’s a lot more work for me to create and upload all those images. Rather than just copying & pasting the code into some code blocks. Hence I threw in a commending piece of praise for those who actually made it through it all lol.

Collapse
 
goran7777 profile image
Goran

Thanks a lot.with small changes like add eslint support i have now very nice boilerplate (Y) .

Collapse
 
rebrimhall profile image
Robert

Thanks for the setup. Had to make a slight adjustment for current Webpack to the config/common:

exclude: [path.resolve(__dirname, 'node_modules')] instead of exclude: ['node_modules')]

Thanks again! Super helpful!

Collapse
 
hdv profile image
Hussein Duvigneau

It turns out now with latest webpack you have to provide regex instead of strings:

exclude: [/node_modules/],

is a simple fix which works.