Setting up environment for React, SASS, ES2015, Babel, Bootstrap with Webpack 2

Note: To setup an environment using Webpack refer my previous article and in this article we will see how to migrate from Webpack v1 to v2

Webpack Config

webpack module.loaders is now module.rules

Loaders are still valid but the new naming conventions are easier to understand.

Automatic -loader module name extension removed

It is not possible anymore to omit the -loader extension when referencing loaders.

Chaining loaders

In webpack 1, loaders were chained with ! but in webpack 2 use can be set to an array of loaders.

css-hot-loader

Since the CSS has been linked into the index file. we use css-hot-loader to reload styles on change.

You can find the entire project on the git repo react-webpack-babel-kit.

Share your comments and feedback.