Setting up Webpack for ES6, React, SASS and Bootstrap

Setting up Webpack for ES6, React, SASS and Bootstrap

If you want to start using Webpack as a module bundler for your React application, you can find great tutorials with detailed instructions (1, 2, 3). In this short blog post I want to share my webpack config, which is based on these tutorials.

In development, I use this config to bundle ES6, React, SASS and Twitter Bootstrap. Babel transpiles JSX and ES6 to ES5 and introduced plugins and presets which we can define as a query parameters. Webpack provides a little Express node.js server called webpack-dev-server, which I use as my dev environment. PostCSS is a post-processor that allows transformation of CSS with JS plugins, I use Autoprefixer in this config. Webpack-merge is a little helper which concatenates arrays and merges objects in your config and npm-install-webpack-plugin is great plugin which automatically installs npm dependencies. Sample project with this webpack config is viewable on GitHub.


Leave a Reply

Your email address will not be published. Required fields are marked *

Welcome! Do you mind if I ask you a few questions?

Sure!Not right now, maybe later?

How do you describe what you do for a living? (1/3)

I'm an owner/founderI'm a leader/managerI'm a developerI'm a recruiterI'm a designerI'm a bloggerI'm an artistOther

Which of these best describes you? (2/3)

I own my own businessI am employed full-timeI am independent contractor, freelancer, or self-employedOther

What's your BIGGEST challenge right now? (3/3)

I am looking for an adviceI need to grow my teamI am looking for someone technical who helps me turn an idea into an applicationI am looking for a developer who helps me build/update a website/web applicationI am looking for someone with a specific technical expertise or knowledge who helps me with a certain taskOther

Please tell me more

Finding a better jobFinding a better project/clientUnrealistic client's expectations or requirementsI don't have time to learn new technologiesI am not able to solve an issue/technical challengeOther

Please tell me more

Finding a developer for my clientAttracting the right candidatesOther

Please tell me more

What brings you to this website? (3/3)

Google or different search engineI want to learn web developmentOther

Please tell me more

Please tell me more




Phone Number

Holler Box