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

Recently I was trying to setup an environment for React. I had two choices browserify or webpack. Since I had an experience of reading the documentation of webpack(which has been more complicated), I decided to go with browserify.

Initially I felt browserify is pretty easy to do the javascript bundling job. Later it was getting complicated when the requirement increased, like to have a development environment, minifying, sass, etc,. I have to find different tools like watchify, uglify, sassify, etc,. which I felt bit annoyed personally(since I need to change the command every time to get the things done).

So, I decided to give a try with webpack. Initially I struggled a bit on where to start with, due to the poor documentation but believe me guys webpack has very nice features like loaders, plugins and a configuration file where you can define the config options.

Now let’s get back to the actual business. In this article we will see a simple hello world program which uses react, babel, sass, es2015 with webpack.

Initialize a new project

The prerequisite is to have node and npm running in your system. Initialize a new npm module, install react and webpack as dev dependencies. Here webpack dev server is needed to serve the bundle(build files) when change happens in the files(more on webpack-dev-server).

Since we are going to use babel as a transpiler, install babel as well. Babel needs plugins to do anything to your code, here we need react and es2015 which we are going to use to write our code.

Configuring webpack

Create a new file under the root of the project folder with the name webpack.config.js

The config contains a single entry point(multiple entries also possible see config) to tell webpack where to start creating the bundle and a output with a filename, here [`name`] comes from the entry object which is `main` here.

Loaders allow you to preprocess the files on import or load them. Here we say load on .js or .jsx files and webpack uses babel to convert them from jsx and es2015 to javascript.

Having devtool option as `source-map` generates the source map files which helps to debug on development.

Create a new file ‘main.js’

Create index.html

Now run the below command in the terminal which should create a new compiled main.js in the dist folder. Using -p as a option webpack uses uglify to minify the file. See it is pretty easy.

./node_modules/webpack/bin/webpack.js -p

Using webpack-dev-server

To run webpack dev server use the below command, the option inline is used here to run the server on http://localhost:8080 which refresh the page on change else by default the server will run on http://localhost:8080/webpack-dev-server which uses iframe and reload the page on change.

./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline

Note: running on server doesn’t create the compiled files, it is served on the fly

Hot Module Replacement

Using hot modules the bundle is notified that a change happened and updates only that part instead of a full page reload. Since we use react here, install the react-hot-loader module & update the config file.

npm install -D react-hot-loader

Update:

When using babel as the compiler with webpack, no need to specify the react hot loader in the webpack config file on instead it should to specified in the .babelrc file.

Old:

Then run the webpack with the option `hot`.

./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot

You can find whether the hot module is loaded or not in the console.

http://localhost:8080/index.html

Configuring SCSS

Create a main.scss file,

Import the styles into javascript,

Compiling SCSS

To compile sass first we need sass-loader, style-loader, css-loader. Run the below command.

npm install -D sass-loader style-loader css-loader

Update the webpack config

When you run webpack now, you can find the complied styles in the bundle as part of styles tag but we don’t need it. To extract the styles from the bundle we need a plugin. So, lets install and configure extract text plugin.

npm install -D extract-text-webpack-plugin

Update the webpack config again. Notice here we removed `style`, since we don’t going to use styles inline.

Run webpack again, Boom!!! now you can find all the styles in the separate file.

Configuring NPM

So, going back to the beginning of the tutorial we installed all the dependencies as local instead of global which made hard use the relative path to run webpack from the local node_modules folder everytime. I prefer to keep all the dependencies local so that we don’t miss any. In the next step we are going to make it simple,

Open the package.json file and add the below lines,

Now you simply run,

npm run build //generates the minified bundle
npm start //generates the bundle, runs on localhost:8080 & listens to changes

You can find the entire project on the git repo react-webpack-babel-kit. Share your comments and feedback.

Note: you can find the article on how to migrate to Webpack 2.0 here