webpack5搭建react脚手架详细步骤

1. 初始化项目

首先，创建一个新目录并初始化项目：

bash

mkdir create-react
cd create-react
pnpm init --y
git init

这里使用pnpm作为包管理工具，因为它在处理依赖和速度上表现更好。

2. 安装React和TypeScript

安装React和React-DOM，以及它们的类型定义：

bash

pnpm add react react-dom
pnpm add -D @types/react @types/react-dom

接着，安装TypeScript并初始化配置文件：

bash

pnpm add typescript -D
tsc --init

你可以根据自己的需求修改tsconfig.json配置文件。

3. 创建源文件

在src目录下创建index.tsx和App.tsx文件：

tsx

// index.tsx
import * as React from 'react'
import * as ReactDOM from 'react-dom/client'
import App from './App'
const root = ReactDOM.createRoot(document.getElementById('app')!)
root.render(<App />)

tsx

// App.tsx
import * as React from 'react'
const App: React.FC = () => {return <div>hello React</div>
}
export default App

4. 安装Webpack及相关依赖

安装Webpack、Webpack CLI、Webpack Dev Server和Webpack Merge：

bash

pnpm add webpack webpack-cli webpack-dev-server webpack-merge -D

这些工具将帮助我们配置和运行Webpack。

5. 配置Webpack

创建webpack.config.js（或其他你喜欢的文件名），并设置基本的Webpack配置：

javascript

const path = require('path');
​
module.exports = {entry: path.resolve(__dirname, '../src/index.tsx'),output: {path: path.resolve(__dirname, '../dist'),filename: '[name].[contenthash].js',},
};

这个配置指定了入口文件和输出配置。

6. 配置开发服务器

创建webpack.dev.js和webpack.prod.js来分别配置开发和生产环境：

javascript

// webpack.dev.js
const { merge } = require('webpack-merge');
const base = require('./webpack.config.js');
​
module.exports = merge(base, {mode: 'development',devServer: {open: true,port: 8080,},
});

javascript

// webpack.prod.js
const { merge } = require('webpack-merge');
const base = require('./webpack.config.js');
​
module.exports = merge(base, {mode: 'production',
});

这些配置文件将根据环境不同应用不同的设置。

7. 配置Babel

安装Babel相关依赖，并在webpack.config.js中配置Babel loader：

bash

pnpm add -D babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

在webpack.config.js中添加Babel配置：

javascript

module: {rules: [{test: /\.(js|ts|jsx|tsx)$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: [['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }],'@babel/preset-typescript','@babel/preset-react',],},},},],
},

这个配置允许Webpack通过Babel处理JSX和TSX文件。

8. 配置图片和字体

在Webpack 5中，可以直接使用资源模块(asset module)来处理图片和字体，无需额外的loader。在webpack.config.js中添加以下配置：

javascript

module: {rules: [{test: /\.(png|jpg|gif|svg|webp)$/i,type: 'asset',parser: {dataUrlCondition: {maxSize: 25 * 1024, // 25kb},},generator: {filename: 'assets/imgs/[name].[hash:8][ext]',},},{test: /\.(eot|ttf|woff|woff2)$/i,type: 'asset',parser: {dataUrlCondition: {maxSize: 25 * 1024, // 25kb},},generator: {filename: 'assets/fonts/[name].[hash:8][ext]',},},],
},

这个配置将图片和字体分别打包到imgs和fonts目录下。

9. 完成配置并运行

最后，更新package.json中的脚本以运行Webpack：

json

"scripts": {"dev": "cross-env NODE_ENV=development webpack serve -c scripts/webpack.dev.js","build": "cross-env NODE_ENV=production webpack -c scripts/webpack.prod.js"
}

现在，你可以使用pnpm dev来启动开发服务器，或者使用pnpm build来构建生产版本