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.