Be the first user to complete this post

  • 0
Add to List

webpack with babel6 and react

In this post we will walk through the basic setup to make babel6 work with webpack. Assuming you have installed webpack. On a high level, Babel has the following architecture. Click on the image to see the enlarged version of it. webpack-architecture


Install core modules & Add the webpack config 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 config to tell babel how to transform the parsed files

Presets are the array of plugins. Most frequently used presets 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"
  ]
}



Also Read:

  1. Writing multiline sql queries in javascript using knex
  2. Use node in es6 syntax with babel transpiling
  3. combineReducers in reduxjs explained
  4. Es6 Spread operator
  5. Generating container components with connect utility in react redux app
  6. Passing the store down implicitly via context in a react redux app
  7. Passing the store down implicitly via context in a react redux app