发布时间：2025-06-24 18:06:55 作者：北方职教升学中心 阅读量：388
static: { directory: path.join(__dirname, "../public"), // 托管静态资源public文件夹 }, headers: { "Access-Control-Allow-Origin": "*" }, // HTTP响应头设置，允许任何//来源进行跨域请求 },});export default devConfig;
然后再 package.json 中添加启动脚本：
"scripts": { "dev": "webpack serve -c build/webpack.dev.ts"},再打开tsconfig.json中的 jsx
{ "compilerOptions": { "target": "es2016", "esModuleInterop": true, "module": "commonjs", "forceConsistentCasingInFileNames": true, "strict": true, "skipLibCheck": true, "jsx": "preserve" }, "include": ["./src"]}然后就可以运行 pnpm run dev 脚本启动项目啦~
6.配置 webpack.prod.ts
import { Configuration } from "webpack";import { merge } from "webpack-merge";import baseConfig from "./webpack.base";const prodConfig: Configuration = merge(baseConfig, { mode: "production", // 生产模式,会开启tree-shaking和压缩代码,以及其他优化});export default prodConfig;在 package.json 中添加：
"scripts": { // ... "build": "webpack -c build/webpack.prod.ts"},运行 pnpm run build 就可以成功打包啦 ~
7.copy 静态资源
pnpm i copy-webpack-plugin -D
修改 webpack.base.ts ：
// ...const baseConfig: Configuration = { // ... plugins: [ new HtmlWebpackPlugin({ title: "webpack5-react-ts", filename: "index.html", // 复制 'index.html' 文件，并自动引入打包输出的所有资源（js/css） template: path.join(__dirname, "../public/index.html"), inject: true, // 自动注入静态资源 hash: true, cache: false, // 压缩html资源 minify: { removeAttributeQuotes: true, collapseWhitespace: true, //去空格 removeComments: true, // 去注释 minifyJS: true, // 在脚本元素和事件属性中缩小JavaScript(使用UglifyJS) minifyCSS: true, // 缩小CSS样式元素和样式属性 } }) ],};export default baseConfig;修改 webpack.prod.ts：
import path from "path";import { Configuration } from "webpack";import { merge } from "webpack-merge";import CopyPlugin from "copy-webpack-plugin";import baseConfig from "./webpack.base";const prodConfig: Configuration = merge(baseConfig, { mode: "production", // 生产模式,会开启tree-shaking和压缩代码,以及其他优化 plugins: [ new CopyPlugin({patterns: [ { from: path.resolve(__dirname, "../public"), // 复制public下文件 to: path.resolve(__dirname, "../dist"), // 复制到dist目录中 filter: (source) => !source.includes("index.html"), // 忽略index.html }, ], }), ],});export default prodConfig;测试一下，在 public 中新增一个 favicon.ico 图标文件，在 index.html 中引入
再执行 pnpm run build 打包，就可以看到 public 下的 favicon.ico 图标文件被复制到 dist 文件 中了~
8.配置环境变量（cross-env + DefinePlugin）
pnpm i cross-env -D
安装 cross-env后修改package.json 的 scripts
"scripts": {//... "dev:dev": "cross-env NODE_ENV=development BASE_ENV=development webpack serve -c build/webpack.dev.ts", "dev:test": "cross-env NODE_ENV=development BASE_ENV=test webpack serve -c build/webpack.dev.ts", "dev:pre": "cross-env NODE_ENV=development BASE_ENV=pre webpack serve -c build/webpack.dev.ts", "dev:prod": "cross-env NODE_ENV=development BASE_ENV=production webpack serve -c build/webpack.dev.ts", "build:dev": "cross-env NODE_ENV=production BASE_ENV=development webpack -c build/webpack.prod.ts", "build:test": "cross-env NODE_ENV=production BASE_ENV=test webpack -c build/webpack.prod.ts", "build:pre": "cross-env NODE_ENV=production BASE_ENV=pre webpack -c build/webpack.prod.ts", "build:prod": "cross-env NODE_ENV=production BASE_ENV=production webpack -c build/webpack.prod.ts"},;在 webpack.base.ts 中打印一下设置的环境变量
console.log('NODE_ENV', process.env.NODE_ENV)console.log('BASE_ENV', process.env.BASE_ENV)执行 pnpm run build:dev ，就可以在控制台打印出
修改 webpack.base.ts
import { DefinePlugin } from 'webpack'module.export = { // ... plugins: [ // ... new DefinePlugin({ 'process.env': JSON.stringify(process.env) }) ]}在根目录下新建 typings/global.d.ts 文件后在里面配置下面代码
declare module 'process' { global { namespace NodeJS { export interface ProcessEnv { BASE_ENV: 'development' | 'test' | 'pre' | 'production' NODE_ENV: 'development' | 'production' } } }}并在 tsconfig.json 中配置：
{ "compilerOptions": { "target": "es2016", // 编译输出的JavaScript版本为ES2016 "esModuleInterop": true, // 允许更好的兼容性与ECMAScript模块导入 "module": "commonjs", // 指定生成哪个模块系统代码，这里是CommonJS "forceConsistentCasingInFileNames": true, // 确保文件名大小写一致，有助于跨平//台开发 "strict": true, // 启用所有严格的类型检查选项 "skipLibCheck": true, // 跳过声明文件的类型检查，可以提高编译速度 "typeRoots": ["./typings/*.d.ts", "node_modules/@types"], // 指定类型声明文//件的路径 "jsx": "react-jsx" // react18这里改成react-jsx，就不需要在tsx文件中手动引入//React了 }, "include": ["./src", "./typings/*.d.ts"] // 指定哪些文件或目录应该被包含在编译范//围内}测试一下，在 src/index.tsx 打印一下两个环境变量
// src/index.tsxconsole.log('NODE_ENV', process.env.NODE_ENV)console.log('BASE_ENV', process.env.BASE_ENV)执行 pnpm run dev:test ，可以在浏览器控制台看到打印的信息
9.配置多环境运行配置
pnpm i dotenv
安装依赖后在根目录下新建一个多文件配置文件夹 env
REACT_APP_API_URL=https://api-dev.com
REACT_APP_API_URL=https://api-test.com
REACT_APP_API_URL=https://api-pre.com
REACT_APP_API_URL=https://api-prod.com
然后再 webpack.base.ts 中引入，然后解析对应环境配置，最后通过 DefinePlugin 进行注入：
import path from "path";import { Configuration, DefinePlugin } from "webpack";import HtmlWebpackPlugin from "html-webpack-plugin";import * as dotenv from "dotenv";// 加载配置文件const envConfig = dotenv.config({ path: path.resolve(__dirname, "../env/.env." + process.env.BASE_ENV),});// console.log("process.env", process.env);// console.log("NODE_ENV", process.env.BASE_ENV);// console.log("REACT_APP_API_URL", process.env.REACT_APP_API_URL);const baseConfig: Configuration = { // ... plugins: [ // 注入到业务 new DefinePlugin({ "process.env": JSON.stringify(envConfig.parsed), "process.env.BASE_ENV": JSON.stringify(process.env.BASE_ENV), "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV), }), ].filter(Boolean), // // 去除数组中的假值（例如，如果某些插件的条件不满足而导致未定义）};export default baseConfig;在index.tsx里写入
import { createRoot } from 'react-dom/client';import App from './App';// const root = document.getElementById('root');const root = document.querySelector('#root')console.log('NODE_ENV', process.env.NODE_ENV)console.log('BASE_ENV', process.env.BASE_ENV)console.log("process.env", process.env);if(root) { createRoot(root).render(<App />)}pnpm i serve -g
然后重启项目： pnpm run dev:dev ，就可以在控制台 还可以验证一下环境配置是否正确，启动打 包： pnpm run build:prod ，通过 serve -s dist ，启动项目： 多运行环境配置成功！
10.文件别名
先在 webpack.base.ts 中配置：
resolve: { extensions: [".ts", ".tsx", ".js", ".jsx", ".less", ".css"], // 别名需要配置两个地方，这里和 tsconfig.json alias: { "@": path.join(__dirname, "../src") },},然后还需要在 tsconfig.json 中配置：
{ "compilerOptions": { // ... "baseUrl": ".", "paths": { "@/*": ["src/*"] }, },}然后就可以在App.tsx项目中使用了~
import '@/App.css'function App() { return <h2>webpack5-react-ts</h2>}export default App谢谢观看~如有问题麻烦指出！点个赞吧~~~
