# Setting up Webpack, Babel and React from scratch

DevFeed: [Setting up Webpack, Babel and React from scratch](<https://devfeed.tech/articles/setting-up-webpack-babel-and-react-from-scratch-37351.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/setting-up-webpack-babel-and-react-from-scratch/>)

Author: Stanko

Published: 2016-08-23T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Webpack](<https://devfeed.tech/topics/webpack.md>), [Babel](<https://devfeed.tech/topics/babel.md>), [React](<https://devfeed.tech/topics/react.md>), [Development](<https://devfeed.tech/topics/development.md>)

Tags: [babel](<https://devfeed.tech/tags/babel.md>), [git](<https://devfeed.tech/tags/git.md>), [npm](<https://devfeed.tech/tags/npm.md>), [react](<https://devfeed.tech/tags/react.md>), [terminal](<https://devfeed.tech/tags/terminal.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>), [webpack](<https://devfeed.tech/tags/webpack.md>)

## AI overview

A step-by-step guide to setting up a React application with Webpack and Babel, including npm initialization, webpack configuration, and ES6/React transpilation. The article notes that its instructions are outdated for Webpack 2 and points readers to newer material.

## Source excerpt

Update, October 2017 # I just released updated tutorial right here. So feel free to skip this one, and read a new one. It uses updated tools, and hopefully it will grow into a new series of webpack/react posts. Update, March 2017 # Webpack 2 is out, so this post is slowly becoming outdated. For webpack 2 - react boilerplate please check this post. This is a living guide # This is the first part of the guide that will be changed over time. For now it covers Webpack, Babel (for ES6) and React with React Router. Next parts will contain more stuff - static properties, decorators, SASS, development and production configs, immutables... Also redux part should be updated really soon. So stay tuned! Other parts: Part 1 - Webpack, Babel, React, Router, ESLint Part 2 - SASS, more ES6 goodness (Static props, decorators, deconstruction...) Part 3 - Where to go from here Before we start # I'll assume that you have a basic knowledge of the unix terminal, and that you have read what Webpack, Babel and React are. Webpack # For a start, install node and npm from https://nodejs.org/en/. Make a git repo (this is optional, but recommended), or create an empty folder. Navigate to it in the terminal. Initialize npm (package.json) by running npm init Now we can start adding npm packages. Install babel core and it's loader for webpack. npm install --save-dev webpack webpack-dev-server Tip: you can use npm i instead of npm install. Create app/js/app.js with a simple console.log('hello world');. This will be the entry point for webpack. Now we need to create a webpack config file webpack.config.js. Tip: you can create files by using touch command - touch FILENAME module.exports = { context: __dirname + "/app", entry: "./js/app.js", output: { filename: "app.js", path: __dirname + "/dist", } }; It is important to understand what is going on so far. This tells webpack that our main application file (app.js) is the entry point, and bundled application should be outputted to the dist folder. __di