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来构建生产版本