All of us have used CRA(create-react-app) when we worked with React. Its an awesome tool. It gives us just to focus on React by letting take care of the configuration. Today we are going to learn how to setup Webpack and Babel for our React app. First lets learn about Webpack and Babel. ✔ Webpack: Its a module bundler which lets us bundle our project files into a single file.
 It requires a file in the root folder. Where we tell our webpack how to work with our application by giving entry point information and also output information. webpack.config.js path = ( ); .exports = { : , output: { : path.join(__dirname, ), filename: }
}; const require 'path' module entry './src/app.js' // relative path path 'public' // absolute path 'bundle.js' // file name Entry point is where does our application going to kick off and we set it by giving relative path value. And the output property tells webpack where to emit the outputs it creates and how to name those files. We have to give absolute path value in our output path properties. ✔ Babel: Its a JavaScript compiler. Babel on its own actually has no functionality. Yeah its a compiler but its not going to compile anything by default. We have to add various pulgins and presets to add support particular language features. You can check this out by visiting website. In babel website navigation bar section you will find . Click on it and you will get a new window. Babel Try It Out Where in left side window you can write your code and in right side window you will get your compiled code. Now lets write some JSX in left side window. template = ; const Hello < > p </ > p In right side window you will get JavaScript understandable compiled code which is always run behind the scene in our React app. In left side you see some options where some options are already been ticked. If you now untick presets option you will see an error cause this is responsible for converting our JSX syntax into JavaScript understandable code. PRESETS react react-preset In our tutorial we are going to use two presets: :- Which helps babel to convert ES6, ES7 and ES8 code to ES5. @babel/preset-env :- Which Transforms JSX to JavaScript. @babel/preset-react ✔ Getting Started: Now we know little bit about webpack and babel. Lets dive into our React setup. Create directories with these commands: mkdir react-setup-tutorial react-setup-tutorial
mkdir public src
touch public/index.html src/app.js cd In index.html file add following code inside it. React App <!DOCTYPE html> < > html < > head < = /> meta charset "UTF-8" < = = /> meta name "viewport" content "width=device-width, initial-scale=1.0" < = = /> meta http-equiv "X-UA-Compatible" content "ie=edge" < > title </ > title </ > head < > body < = > div id "root" </ > div < = > script src "./bundle.js" </ > script </ > body </ > html Initialize the project by running: npm init -y ✔ Install Webpack & React: npm install webpack webpack-cli -- - save dev We installed so that we can use webpack in the command line. webpack-cli We already know that webpack needs file in the root of the project directory. webpack.config.js So lets create webpack.config.js file with the following code inside it. path = ( ); .exports = { : , : { : path.join(__dirname, ), : }
}; const require 'path' module entry './src/app.js' output path 'public' filename 'bundle.js' Next add the webpack command inside package.json : : { : , : } "scripts" "start" "webpack --mode=development" "build" "webpack --mode=production" There are two modes in Webpack, and . Which we can set by flag. Production mode produces optimize files which are ready for use in production. development production --mode Install React: npm react react-dom install Now import react and react-dom inside our app.js file and also add some react code. React ; ReactDOM ; template = React.createElement( , {}, );

ReactDOM.render(template, .getElementById( )); import from 'react' import from 'react-dom' const 'p' 'Hello from react' document 'root' Now use below command in your terminal and open your index.html file in your browser. start npm Your app is working well. But you have question why didn't we use JSX. This time lets try with some JSX code in our app.js file. React ; ReactDOM ; template = ;

ReactDOM.render(template, .getElementById( )); import from 'react' import from 'react-dom' const Hello from react < > p </ > p document 'root' Now again run our previous command. start npm This time you will get an error. That's because we use JSX and JavaScript doesn't support JSX. So If we want to use JSX in our app we need to compiled it. And we can do it by babel. ✔ Install & Configure Babel: npm @ @ @ --save-dev install babel/core babel/preset-env babel/preset-react babel-loader We already know about @babel/preset-env and @babel/preset-react. Now what is @babel/core and babel-loader. : It allows us to run babel from tools like webpack. @babel/core : Its a webpack plugin. It allows us to teach webpack how to run babel when webpack sees certain files. babel-loader Lets configure babel by creating a .babelrc file inside the root of the project directory with following contents inside of it. { : [ , ]
} "presets" "@babel/preset-env" "@babel/preset-react" This file will tell babel which presets to use for transpiling the code. Now its time to teach webpack how to compile JSX into JavaScript code. To do that we need to use loader. A loader let us customize the behavior of webpack when it loads a certain files. Its going to run certain files through babel. For that we need to setup loader in file via the property on our objects. property needs an array of rules and a rule let us define how we want to use our loaders. Now we have one rule to take JSX and convert it into JavaScript with babel. webpack.config.js module module path = ( ); .exports = { : , : { : path.join(__dirname, ), : }, : { : [
      { : , : , : }
    ]
  }
}; const require 'path' module entry './src/app.js' output path 'public' filename 'bundle.js' module rules test /\.js$/ exclude /node_modules/ loader 'babel-loader' Here we set one rule of object where property tells which loader we want to use and we use . property for what files do we actually want to run this loader on and we want to run it on files that ends up with . property to exclude a set of files and we use cause we don't want to run babel through those libraries. Now we can use JSX in our React. Lets run our app again. loader babel-loader test .js exclude /node_modules/ start npm This time we don't get any error. Open your file in the browser and yeah its working. index.html ✔ Configure Source Map: Lets add some extra configuration settings in our file. webpack.config.js path = ( ); .exports = { : , : { : path.join(__dirname, ), : }, : { : [
      { : , : , : }
    ]
  }, : }; const require 'path' module entry './src/app.js' output path 'public' filename 'bundle.js' module rules test /\.js$/ exclude /node_modules/ loader 'babel-loader' devtool 'cheap-module-eval-source-map' Here we setup Source map by using property. It enhance our debugging process. Its use to display our original JavaScript while debugging, which is lot easier to look at than minified code. devtool ✔ Install Dev Server: Run this below command in the terminal. npm install webpack- -server -- - dev save dev Add following code inside webpack.config.js file. path = ( ); .exports = { : , : { : path.join(__dirname, ), : }, : { : [
      { : , : , : }
    ]
  }, : , devServer: { : path.join(__dirname, )
  }
}; const require 'path' module entry './src/app.js' output path 'public' filename 'bundle.js' module rules test /\.js$/ exclude /node_modules/ loader 'babel-loader' devtool 'cheap-module-eval-source-map' // changed line contentBase 'public' Next add webpack-dev-server command inside package.json: : { : , : , : } "scripts" "start" "webpack --mode=development" "build" "webpack --mode=production" "dev-server" "webpack-dev-server" Now run this command. npm run dev-server Its going to start development server. And It gives us output where we can access it. Now we have integrated both tools into one, the dev server is our server and its also running webpack for us. Now we can visit the highlighted url and we will get our app. ✔ Loading the Styles: Lets create a new file and folder in the directory. src Use following command to create file and folder. mkdir src/styles
touch src/styles/styles.css Now add following styles inside styles.css file. * { : blue;
} color To load our file we need to setup new rules in file. style.css webpack.config.js Before that we need to install some new loader. npm css-loader -loader install style --save-dev Allows webpack to load our CSS assets. css-loader: Take CSS and adds it to the DOM by injecting a <style> tag. style-loader: Now add new rules in our webpack.config.js file. path = ( ); .exports = { : , : { : path.join(__dirname, ), : }, : { : [
      { : , : , : }, { : , : [ , ]
      }
    ]
  }, : , : { : path.join(__dirname, )
  }
}; const require 'path' module entry './src/app.js' output path 'public' filename 'bundle.js' module rules test /\.js$/ exclude /node_modules/ loader 'babel-loader' // New rules to load css test /\.css$/ use 'style-loader' 'css-loader' devtool 'cheap-module-eval-source-map' devServer contentBase 'public' import inside our app.js file and run dev-server to see the effect. style.css React ; ReactDOM ; ; template = ;

ReactDOM.render(template, .getElementById( )); import from 'react' import from 'react-dom' import './styles/styles.css' const Hello from react < > p </ > p document 'root' If we want to use SCSS then we need to install that would help webpack to compile sass to css. The is dependent on another package . sass-loader sass-loader node-sass npm install sass-loader --save-dev node -sass path = ( ); .exports = { : , : { : path.join(__dirname, ), : }, : { : [
      { : , : , : }, { test: , : [ , , ]
      }
    ]
  }, : , : { : path.join(__dirname, )
  }
}; const require 'path' module entry './src/app.js' output path 'public' filename 'bundle.js' module rules test /\.js$/ exclude /node_modules/ loader 'babel-loader' // Rules to load scss // Some change here /\.scss$/ use 'style-loader' 'css-loader' 'sass-loader' devtool 'cheap-module-eval-source-map' devServer contentBase 'public' Now change our file extension to that is style.css .css .scss style.scss. Alos change the css import in app.js to: ; import './styles/styles.scss' And add following style to see that our wepback is working correctly for SASS. : blue;

* { : ;
} $brand-color color $brand-color Now run dev-server again by using following command. npm run dev-server And we configure our webpack for SASS. That's it. Now we have configure Webpack and Babel for React that we can use to create our React projects. Thanks for reading and stay tuned.🙂 Previously published at https://dev.to/iamismile/how-to-setup-webpack-and-babel-for-react-59ph

Read My Stories

Too Long; Didn't Read

 Add passwordless user experiences to your app

HackerNoon Mobile

How to Setup Webpack and Babel 7 for React

Too Long; Didn't Read

Companies Mentioned

@iamismile

RELATED STORIES