Install webpack
yarn add webpack webpack-cli -D
Update package.json
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --open --mode development"
}
Install babel
yarn add @babel/core babel-loader @babel/preset-env @babel/preset-react -D
Config .babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
Create webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
Create index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to set up React, Webpack, and Babel</title>
</head>
<body>
<div id="container"></div>
</body>
</html>
Web pack dev-server
yarn add webpack-dev-server -D
yarn add html-webpack-plugin html-loader -D
Start it
yarn start
