文章序
脚手架虽好，但是为了彻底弄明白前端工程化和webpack，最好是手动创建前端项目亲身体验一把，本文旨在使用webpack从零开始构建react + ts项目，希望对你有所帮助
1.项目初始化
1.1创建文件夹
右键-新建-文件夹 重命名为react-ts-project
创建好后双击进入该文件夹
或者 命令行执行
mkdir react-ts-project
cd react-ts-project
1.2项目初始化
执行npm init -y初始化
执行完毕你会看到生成了一个package.json文件，此文件存放本项目相关信息，脚本命令，依赖包等信息
打开package.json，在script里增加
"dev": "webpack-dev-server --open --mode development",
"build": "webpack --mode production",
此时package.json文件内容
{
"name": "react-ts-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --open --mode development",
"build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
2.依赖安装
用vscode或其他编译器打开react-ts-project，新建终端，在命令行中输入
npm i webpack webpack-cli webpack-dev-server react react-dom typescript esbuild-loader html-loader html-webpack-plugin
安装本项目所需依赖，执行完你会发现在项目根目录多了一个node_modules文件夹，该文件夹就是用于存放项目依赖，下面对这些依赖做简要解释
webpack、webpack-cli: 提供webpack打包基础能力，不多解释
webpack-dev-server: 提供开发环境本地运行项目的能力，可以使用node等替代
react、react-dom: react相关依赖包，不多解释
typescript: 提供Typescript语言能力
esbuild-loader: 打包时将js、jsx、ts、tsx等文件编译成目标版本语言，比如es5，用以替代bable + ts-loader
html-loader、html-webpack-plugin: 用以根据指定html模板文件生成最后打包的html文件
最终package.json文件内容
{
"name": "react-ts-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --open --mode development",
"build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"esbuild-loader": "^3.0.1",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.1",
"react": "^18.3.0-canary-a1f97589f-20230526",
"react-dom": "^18.3.0-canary-a1f97589f-20230526",
"typescript": "^5.2.0-dev.20230602",
"webpack": "^5.85.0",
"webpack-cli": "^5.1.3",
"webpack-dev-server": "^4.15.0"
}
}
3.编写webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
entry: "./src/main.tsx", //入口文件
output: { //输出路径和文件名
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.html$/, //使用html-loader
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.(js|ts|jsx|tsx)$/, //使用esbuild-loader将js、ts、jsx、tsx文件内容转换为es2015
include: path.appSrc,
use: [
{
loader: "esbuild-loader",
options: {
loader: "tsx",
target: "es2015",
},
}
]
}
]
},
plugins: [ //使用插件，这里使用了HtmlWebPackPlugin
new HtmlWebPackPlugin({
title: "react-ts-project",
filename: "./index.html",
template: "./public/index.html"
})
]
};
4.编写tsconfig.json
该文件是对ts语言的一些配置，直接复制即可，有兴趣可自行研究
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
// "suppressImplicitAnyIndexErrors": true,
"outDir": "./build",
"sourceMap": false,
"allowJs": true, // allowJs=true => tsc compile js as module, no type check
"removeComments": true,
"noImplicitReturns": true,
"noEmit": true,
"noImplicitAny": false,
"noImplicitThis": true,
"skipLibCheck": true,
"moduleResolution": "node",
"jsx": "react-jsx",
"esModuleInterop": true,
"declaration": true,
"downlevelIteration": true,
"allowImportingTsExtensions": true,
"lib": [
"dom",
"esnext",
"DOM.Iterable"
],
"baseUrl": "./",
"paths": {
"@api/*": [
"./src/api"
],
"@src/*": [
"./src/*"
],
"@components/*": [
"./src/components/*"
],
"@utils/*": [
"./src/utils/*"
],
"@styles": [
"./src/styles"
]
}
},
"include": [
"src",
],
"exclude": [
"node_modules",
"webpack",
"build",
]
}
5.编写项目
首先在根目录下新建src文件夹、public文件夹，在public文件夹内新建index.html文件，文件内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>react-ts-project</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
在src文件下新建main.tsx文件，文件内容如下
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.tsx";
ReactDOM.render(
<App />,
document.getElementById("app")
);
新建app.tsx文件，文件内容如下
import React, { useState } from "react";
function App() {
return (
<div>hello react + ts</div>
);
}
export default App;
6.运行项目
此时你已经完成一个基本的react + ts项目了，在终端输入npm run dev运行项目，会自动打开浏览器你会看到
这就是我们刚才在app.tsx里编写的内容，好了，到这里你就可以愉快的进行开发了
7.打包项目
当我们完成项目的编写，就需要将项目放到服务器上去运行了，在此之前需要对项目进行打包，在终端执行npm run build命令，会看到当打包完成在跟目录会出现一个dist文件夹，将该文件夹下的index.html和bundle.js文件放到服务器环境上对应的nginx或tomcat配置的路径内即可访问
网友评论