React Development Using Webpack

Versions: Webpack 5, React 18

This is an article that I wanted to write a long time ago, hoping to familiarize myself with more low-level knowledge by developing projects directly with Webpack. I wrote for a while at that time but didn't continue.

1. Create a Project

1.1 Initialization

mkdir webpack-react
cd webpack-react
git init
npm init -y
git branch -M main
code .

1.2 Webpack Initialization

npx webpack init # ①
vim .gitignore # ②
git add -A
git commit -m "Webpack Init"
npm run serve

① Errors may occur during runtime, just retry to resolve.

② At least /node_modules,dist

2. Install React

npm i react react-dom
npm i -D @types/react @types/react-dom

3. Configuration

Add to tsconfig.json

{
	"compilerOptions": {
		"jsx": "react-jsx",
		"moduleResolution": "node"
	}
}

Add App.tsx to the src folder.

export default function App() {
	return <div>Hello World</div>
}

Change index.ts to index.tsx

import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />)

Add an element with id="root" to index.html

<body>
	<div id="root" />
</body>

Change the entry in* webpack.config.js*

const config = {
	entry: './src/index.tsx'
}

Finish

With this, the configuration of Webpack + React is complete, and the rest is more about project customization.

Here is a repository: https://github.com/YYsuni/archive-webpack-react

Summary

When starting to learn front-end development, Webpack seemed strange yet familiar. At that time, configuring webpack was not easy for me, there were many things to pay attention to, and I didn’t know how to get started. In daily development, I rarely touched on the aspect of webpack. More often, I developed using CRA or Next.js, and basically all the necessary functionality needed during development could be found in the corresponding documentation. However, when more customized configurations are needed, it is always unavoidable to configure webpack. Therefore, I always want to learn and accumulate more by constantly reading the documentation of Webpack and seeing how CRA is configured internally.

And so, one day, I decided to use native Webpack packaging to have more direct interaction with it and become more proficient. I started using Webpack directly for some draft projects, testing deployment. In those project, I manually configured every aspects, learning how to configure the features needed for production in Webpack.

Also, take a look at how other people develop their plugins. And so on, and so forth.

I used to think that configuring a project with Webpack would be a bit difficult. But now it seems commonplace to me. I know exactly how to add the necessary configuration, plugins, and features.

Nowadays, it is more common to start a project using Vite + pnpm. I feel that Vite brings a faster and more lightweight experience, without requiring much configuration, and it basically meets the needs of daily development. Of course, with previous experience using Webpack, I feel more confident using more tools, understanding their underlying logic, and knowing how to solve problems.

I guess I wanna say it, "What used to seem like insurmountable challenges are no longer confusing to me. Things change with the passage of time, I should pursue the next goal."