Setting up Webpack 4 and Babel 7 for React Step By Step

S

In this article, I’m going to quickly show how to start a new React app with Webpack 4 and Babel 7. This is going to be a no-bullshit step-by-step guide.

Spoiler: it’s very easy.

  1. Create a new directory with mkdir test-react-app && cd test-react-app
  2. Init the package.json with command npm init -y (-y flag means don’t ask just create it)
  3. Install Webpack npm install webpack webpack-cli --save-dev
  4. Now let’s actually create a simple React app. Install React with npm i react react-dom --save
    You can even try to compile it now with ./node_modules/.bin/webpack  src/index.jsx. Obviously, it will fail because we need to install Babel.
  5. So let’s add it with npm i --save-dev babel-loader @babel/core
  6. And also we will need the presets for React npm i --save-dev @babel/preset-env @babel/preset-react
  7. … and a configuration file
  8. Let’s create a Webpack configuration file
    By this point, you should be able to compile you JSX file by running ./node_modules/.bin/webpack. But we’re not done yet.
  9. We actually want to see the app working in a browser. So we will need a webpack-dev-server. Plus we will use html-webpack-plugin to generate an index.html file. npm i --save-dev webpack-dev-server html-webpack-plugin
  10. Change the webpack config

Now, this is it.

Run ./node_modules/.bin/webpack-dev-server and open your website in a browser at http://localhost:8080. You should be able to see the greeting message.

Where to go from here

Recent Posts

Categories

Meta