Install webpack:
$ npm i webpack webpack-cli --save-dev.
Create the file with the configuration:
module.exports = {
output: {
filename: 'app.bundle.js'
},
plugins: []
};Install html plugin to load the bundle file:
$ npm i html-webpack-plugin --save-dev
Install a plugin for a server to launch the application:
$ npm i webpack-dev-server --save-dev
Modify the package.json with the new scripts:
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
}Install React and React-DOM:
$ npm install react react-dom
Inject the html in the DOM:
index.html:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div id="app"></div>
</body>
</html>index.js:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render('Kath', document.getElementById('app'));It is used for react-dom to recognize the html in the render.
Install babel:
$ npm i @babel/core @babel/preset-env babel-loader @babel/preset-react --save-dev.
Configuring babel
module.exports = {
output: {
filename: 'app.bundle.js'
},
plugins: [new HtmlWebpack({ template: 'src/index.html' })],
module: {
rules: [
{
test: /\.js$/, // All the js files
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
}
]
}
}- To deploy the application we are going to user ZEIT
