Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

webpack with babel6 and react

In this post we will walk through the basic setup to make babel6 work with web­pack. Assum­ing you have installed webpack.

On a high level, Babel has the fol­low­ing archi­tec­ture. Click on the image to see the enlarged ver­sion of it.

webpack-architecture


Install core mod­ules & Add the web­pack con­fig to parse the .js | .jsx files with babel loader

npm i --save-dev babel-loader 
npm i --save-dev babel-core
// webpack.config.js

module: {
  loaders: [
    { test: /.js|.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

Note: “babel-loader” or “babel” both refers to the same loader.


Add babel con­fig to tell babel how to trans­form the parsed files

Pre­sets are the array of plu­g­ins. Most fre­quently used pre­sets with the react project are the following.

npm i --save-dev babel-preset-stage-2
npm i --save-dev babel-preset-react
npm i --save-dev babel-preset-es2015
//.babelrc

{
  "presets": [
    "es2015",
    "stage-2",
    "react"
  ]
}

You may also like...