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