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