webpack


Webpack ReactJS Gatsby
Introduction Gatsby is static site generator platform based in ReactJS and powered by GraphQL. I’ve been using Gatsby for a while now and most recently used it to rebuild my personal homepage. One of the things that has come to my attention is that transpiled Javascript source maps are published to production builds by default in V2. It’s nice to be transparent and to publish your source code and share with the software community, but maybe this is an undesirable effect (especially when building commercial websites). In this post we’ll see how we can configure Gatsby to publish source maps […]

Gatsby: Disable source maps in production


react webpack babel sass mn
Introduction Babel 7 comes after more than 2 years of active development and four thousand commits. The main advantage of the new version is the speed optimizations and configuration flexibility. In this tutorial we’ll see how to upgrade our React boilerplate application to support Babel 7. Bebel dependencies The first step in order to support Babel 7 is to replace our old dependencies in package.json: [crayon-5db0eecd44ba2301301781/] with new ones: [crayon-5db0eecd44bac964895969/] The main change compared to the older version is Babel’s switch to scoped packages. To summarize, from now on most of the packages named with the prefix babel- will now be named […]

React: Babel 7 support in boilerplate application


react webpack babel sass mn 3
Introduction In this tutorial we’ll see how to build from scratch a React application with Webpack, Babel and Sass. The main requirement for this tutorial is to have a node installation with npm for your platform/OS. The tutorial is structured in several parts: Create an initial project directory Webpack setup Babel setup React Add support for Sass styles Initial project The first step is to create an initial empty project. For that purpose we’ll create an empty directory for the project and run the following command: [crayon-5db0eecd4503e908377417/] This command will set up a new package.json file containing metadata for an […]

React : Babel + Webpack + Sass boilerplate application