电商网站开发代码,win8扁平化网站,上海的咨询公司排名,机械网站 英文1. 初始化项目
首先#xff0c;创建一个新目录并初始化项目#xff1a;
bash
mkdir create-react
cd create-react
pnpm init --y
git init
这里使用pnpm作为包管理工具#xff0c;因为它在处理依赖和速度上表现更好。
2. 安装React和TypeScript
安装React和React-DOM…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 divhello 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_ENVdevelopment webpack serve -c scripts/webpack.dev.js,build: cross-env NODE_ENVproduction webpack -c scripts/webpack.prod.js
}
现在你可以使用pnpm dev来启动开发服务器或者使用pnpm build来构建生产版本
