Create a react app only using a basic webpack and babel configuration
You can find the code with the settings already made in my repository https://github.com/jose1897/minimal-react-webpack-babel-setup
Requirements
- install node
First we will define the tools that we are going to use and we are going to give a brief review of what each one does
Webpack
Webpack is a Bundler of javascript modules although it can also transform static files such as HTML, css and images.
The main benefits of using webpack are:
- Provides you with a transcompiler with babel
- Elimination of dead code
- Code minification
- Management of static files
Babel
It is a javascript transcompiler that is mainly used to convert ECMAScript 2015+ code to a compatible javascript version for older environments.
Already finished the boring theory part 😴 Let's start with the configuration
We will start by creating a new directory that will contain our project
mkdir react_app
cd react_app
Then we will proceed to start a new project using npm
npm init -y
This will create a package.json file which has the default settings for an npm project.
Before continuing to install the packages we are going to create the basic files of the project
react_app
├─ package.json
└─ src
├─ App.jsx
├─ index.html
└─ index.js
The file index.html andindex.js will be the ones that will start our project. For now, let's work with them.
The index.html will have the basic HTML5 format with a div tag that will have the id 'root'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
This div will be where our react components will be rendered
The index.js will start the javascript script in the html
But before writing the code of this file we will install react with the following command
npm install react react-dom
These packages allow you to write react code and render it at the DOM
Now we can code the index.js
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<h1>Hello world</h1>, document.querySelector('#root'))
Import the react packages and render an h1 in the tag with the id of 'root'
Now we continue with the setup! 😁
We will install the main packages for the configuration using npm
npm install webpack webpack-cli --save-dev
npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev
Ok ok I know, this is too much at once but everything will be explained
The webpack packages are the basic packages so that we can use to bundle the project code
Babel packages, I will detail them one by one
- babel/core: is the babel core package
- @babel/preset-env: allows you to use the latest JavaScript without micromanaging which syntaxist transformations
- @babel/preset-react: allows to use react code
- babel-loader: This package allows you to transpile JavaScript files using Babel and webpack.
Now that we understand what each package is used for, let's add the following scripts to package.json
"start": "webpack --mode development",
"build": "webpack --mode production"
You will notice that when executing any of these scripts we have errors and not exactly the expected result, this is because we have not configured the webpack even so we are going to do it
To configure webpack we will create a file webpack.config.js
const path = require("path");
module.exports = {
entry: "./src",
output: {
path: path.resolve(__dirname, "public"),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.(js|jsx)/,
exclude: /node_modules/,
use: ["babel-loader"],
},
],
},
resolve: {
extensions: ["*", ".js", ".jsx"],
},
};
Ok, don't be scared. What we are doing here is very simple.
We export the webpack configuration, first indicating where is the index.js file that we are going to use and then indicating the folder where we are going to save it and the name of the file.
Then we create a rule indicating webpack for the .js and .jsx files is going to use babel-loader
And finally we indicate the extensions that webpack can use
What's going on? still not working 😟
Well that's because we haven't configured babel yet, for this we will create a .babelrc file
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"@babel/react"
]
}
Here we are only indicating to babel to use the packages that you had installed before specifying that we will use the node modules for the preset-env
It works now! ...Or not ?
Well, you can certainly run the scripts and the bundle.js file will be created correctly, but there is no html to open our page. And that's because webpack is designed for javascript, to be able to use it with html we will have to install a plugin we will use npm for this
npm install html-webpack-plugin --save-dev
We will add this plugin to our webpack configuration
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
module.exports = {
entry: "./src",
output: {
path: path.resolve(__dirname, "public"),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.(js|jsx)/,
exclude: /node_modules/,
use: ["babel-loader"],
},
],
},
resolve: {
extensions: ["*", ".js", ".jsx"],
},
plugins: [htmlPlugin]
};
First we import the plugin we instantiate it indicating which file it will take and the name of the file it will create and then we include the instance in plugins
Everything is ready !! 😉 Well almost
The index.html and thebundle.js are already created when running npm start ornpm run build but this is not how a react application is executed, at least not in development mode, it is annoying that every once we make a change in the code we have to create the files and for this we will add a new webpack package using npm
npm install webpack-dev-server
Now we will change the start script of the package.json
"webpack-dev-server --mode development --open --hot --port 3000"
This command will no longer create the files in the public folder instead it will start a server at http: // localhost: 3000 /
The —open indicates that the webpack will continue to run by compiling the file changes and making these changes visible
The —hot is for changes to be made without having to refresh the entire page
Now your setup is ready!
Let's add code to the App.jsx file to test that you can also run this extension file
import React from 'react'
const App = () => {
return (
<h1>
React App
</h1>
)
}
export default App
And let's import this into index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App/>, document.querySelector('#root'))
Top comments (3)
It throws an error about webpack-dev-server. I solved the error with using webpack-dev-server:"3.7.1". If anyone gets an error that saying " Cannot find module 'webpack-cli/bin/config-yargs' " thats the solve for this problem. thank u Jose it's a great article.
Thank you for this
Thank you