├── .babelrc
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
└── index.html
├── src
├── Hello.jsx
└── index.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@babel/preset-env",
4 | ["@babel/preset-react", {
5 | "runtime": "automatic"
6 | }]
7 | ]
8 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | build
2 | node_modules
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-webpack-setup
2 | Simple step by step walkthrough of setting up a React app with Webpack
3 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-webpack-setup",
3 | "version": "1.0.0",
4 | "description": "Simple step by step walkthrough of setting up a React app with Webpack",
5 | "main": "index.js",
6 | "scripts": {
7 | "build": "webpack --mode production",
8 | "start": "webpack serve --mode development"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git+https://github.com/jsramblings/react-webpack-setup.git"
13 | },
14 | "keywords": [],
15 | "author": "",
16 | "license": "ISC",
17 | "bugs": {
18 | "url": "https://github.com/jsramblings/react-webpack-setup/issues"
19 | },
20 | "homepage": "https://github.com/jsramblings/react-webpack-setup#readme",
21 | "devDependencies": {
22 | "@babel/core": "^7.18.2",
23 | "@babel/preset-env": "^7.18.2",
24 | "@babel/preset-react": "^7.17.12",
25 | "babel-loader": "^8.2.5",
26 | "html-webpack-plugin": "^5.5.0",
27 | "webpack": "^5.73.0",
28 | "webpack-cli": "^4.9.2",
29 | "webpack-dev-server": "^4.9.1"
30 | },
31 | "dependencies": {
32 | "react": "^18.1.0",
33 | "react-dom": "^18.1.0"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | React + Webpack
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/Hello.jsx:
--------------------------------------------------------------------------------
1 | const Hello = () => Hello from React!
;
2 |
3 | export default Hello;
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import { createRoot } from "react-dom/client";
2 | import Hello from "./Hello";
3 |
4 | const container = document.getElementById("root");
5 | const root = createRoot(container);
6 | root.render();
7 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 | const HtmlWebpackPlugin = require("html-webpack-plugin");
3 |
4 | module.exports = {
5 | entry: "./src/index.js",
6 | output: {
7 | filename: "main.js",
8 | path: path.resolve(__dirname, "build"),
9 | },
10 | plugins: [
11 | new HtmlWebpackPlugin({
12 | template: path.join(__dirname, "public", "index.html"),
13 | }),
14 | ],
15 | devServer: {
16 | static: {
17 | directory: path.join(__dirname, "build"),
18 | },
19 | port: 3000,
20 | },
21 | module: {
22 | // exclude node_modules
23 | rules: [
24 | {
25 | test: /\.(js|jsx)$/,
26 | exclude: /node_modules/,
27 | use: ["babel-loader"],
28 | },
29 | ],
30 | },
31 | // pass all js files through Babel
32 | resolve: {
33 | extensions: ["*", ".js", ".jsx"],
34 | },
35 | };
36 |
--------------------------------------------------------------------------------