I discovered this repo from a FreeCodeCamp blog post (https://www.freecodecamp.org/news/an-intro-to-webpack-what-it-is-and-how-to-use-it-8304ecdc3c60/) but it is fairly out of date with what was talked about in that post.
Project layout
The blog refers to a components folder but this repo does not have one. I put the App.js file directly in the src folder and updated the import statement in index.js:
Index.html
The index.html should look like this. The script should use the bundle.js file mentioned in the webpack.config.js file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack React</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>Babel presets
The correct .babelrc looks like this:
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry",
"corejs": "3.22"
}
],
["@babel/preset-react"]
]
}
I discovered this repo from a FreeCodeCamp blog post (https://www.freecodecamp.org/news/an-intro-to-webpack-what-it-is-and-how-to-use-it-8304ecdc3c60/) but it is fairly out of date with what was talked about in that post.
Project layout
The blog refers to a components folder but this repo does not have one. I put the
App.jsfile directly in thesrcfolder and updated the import statement inindex.js:Index.html
The index.html should look like this. The script should use the
bundle.jsfile mentioned in the webpack.config.js file:Babel presets
The correct
.babelrclooks like this: