先使用npm init进行初始化，生成一个package.json文件，文件内容如下：
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
接下来安装react react-dom,这两个是react的核心库,如果需要使用路由和状态管理库，可以找适合的库进行安装。
接下来安装打包工具webpack，安装webpack需要安装webpack、webpack-cli、webpack-dev-server，因为这几个只是在开发时候使用的，所以安装的时候，指令是npm install webpack --save-dev。
因为是要搭建ts的开发环境，所以还需要安装typescript，使用npm install typescript -D，只在开发环境下安装。安装完成之后，在根目录添加tsconfig.json文件。
{
"compilerOptions": {
"target": "es5",
"baseUrl": ".",
"lib": ["dom", "dom.iterable", "esnext"],
"paths": {
"@/*": ["src/*"]
},
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "Bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": false,
"jsx": "react-jsx"
},
"include": ["src"],
"exclude": ["node_modules"]
}
下来就是安装一些需要用到的loader，因为是在ts环境下开发，所以先安装ts-loader,用来解析ts和tsx文件；用来加载css和sass文件的loader(style-loader, css-loader, sass-loader)；用来加载静态资源的loader(url-loader、file-loader)。
如果需要将es6语法转es5及更低的语法，需要使用babel。使用babel需要安装babel-loader、@babel/core，而要实现代码转换还需要安装@babel/preset-env，在一些低版本的浏览器中不支持es6语法，就需要使用一些语法转换的工具，比如babel-polyfill，但是这个插件会污染全局环境和代码冗余，比如它会在全局加入一些ES6才有的类Set、Map这些，另外会造成代码冗余，在不同的模块引入poly-fill，那它会在引入的模块中都生成一下辅助代码。为了解决这个问题，可以使用其他的工具@babel/plugin-transform-runtime、@babel/runtime和@babel/runtime-corejs3。然后babel的配置可以这样写，也可以创建一个.babelrc的文件来写babel的配置
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: ['babel-loader'],
options:
presets: [
[
"@babel/preset-env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1"
},
useBuiltIns: "usage",
corejs: "3.6.5"
}
]
],
"plugins": ["@babel/plugin-transform-runtime"]
}
},
'ts-loader'],
exclude: '/node_modules/'
}
]
最后再需要装两个经常会用到的插件CleanWebpackPlugin(这个是每次打包回清空之前打包的文件)，HtmlWebpackPlugin(这个是用来配置项目的模板文件的)
以下是一个完整的配置：
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
devServer: {
/** 这两个配置根据使用的webpack的版本选择其中一个就可以*/
// 这个是webpack4的配置
// contentBase: path.resolve(__dirname, "dist"),
// 这个是webpack5的配置
static: {
directory: path.join(__dirname, "public"),
},
compress: true,
port: 5174,
},
mode: "development",
entry: path.join(__dirname, "src/main.tsx"),
output: {
path: path.join(__dirname, "public"),
filename: "bundle[hash].js",
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: ["babel-loader", "ts-loader"],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(gif|jpg|jpeg|png|svg)$/,
type: "asset/resource",
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: "file-loader",
},
],
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"],
alias: {
"@": path.resolve(__dirname, "src"),
},
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "index.html",
inject: true,
}),
],
};
package.json的详细配置如下，也可以使用如下package.json直接在node环境下执行npm install，就可以安装所有需要的依赖。
{
"name": "app-react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.24.8",
"@babel/core": "^7.24.9",
"@babel/preset-env": "^7.24.8",
"@babel/preset-react": "^7.24.7",
"@babel/runtime": "^7.25.6",
"@babel/runtime-corejs3": "^7.25.6",
"@babel/plugin-transform-runtime": "^7.25.4",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"babel-loader": "^9.1.3",
"css-loader": "^7.1.2",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.6.0",
"sass-loader": "^14.2.1",
"style-loader": "^4.0.0",
"ts-loader": "^9.5.1",
"typescript": "^5.5.3",
"url-loader": "^4.1.1",
"webpack": "^5.93.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
}
}
