526互联

webpack - 构建支持TypeScript的React应用

发布时间 2023-10-06 14:31:56作者: 箫笛

1. 初始化package.json

  • 创建项目文件夹
    mkdir webpack-react-ts
    cd webpack-react-ts
  • 初始化项目package.json
    yarn init -y
{
  "name": "webpack-react-ts",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
}

2. 添加必要的依赖包

  • 项目依赖
    react, react-dom

  • 开发依赖
    编译器：babel (core, env, react, ts and loader)
    跨平台环境变量配置:cross-env
    webpack插件：html-webpack-plugin
    serve: 提供访问静态网站，或单页应用的服务
    webpack插件(js压缩优化)：terser-webpack-plugin
    Typescript语言支持：typescript
    Types相关的类型定义包：@types/
    webpack相关：webpack (core, cli, dev-server)

"dependencies": {
  "react": "^16.12.0",
  "react-dom": "^16.12.0"
},
"devDependencies": {
  "@babel/core": "^7.7.7",
  "@babel/preset-env": "^7.7.7",
  "@babel/preset-react": "^7.7.4",
  "@babel/preset-typescript": "^7.7.7",
  "@types/node": "^12.12.5",
  "@types/react": "^16.9.11",
  "@types/react-dom": "^16.9.3",
  "babel-loader": "^8.0.6",
  "cross-env": "^6.0.3",
  "html-webpack-plugin": "^3.2.0",
  "serve": "^11.3.0",
  "terser-webpack-plugin": "^2.3.2",
  "typescript": "^3.7.4",
  "webpack": "^4.41.5",
  "webpack-cli": "^3.3.10",
  "webpack-dev-server": "^3.10.1"
}

3. 添加必要的脚本命令

  • 使用cross-env 设置环境变量
  • 使用webpack-dev-server 启动开发服务器
  • 使用webpack进行打包编译
  • 使用serve 提供访问网站服务
"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server",
  "build": "cross-env NODE_ENV=production webpack",
  "start": "serve dist"
},
  • 使用yarn命令安装应用依赖包

4. 添加babel配置文件 .babelrc

{
  "presets": ["@babel/env", "@babel/react", "@babel/typescript"]
}

5. 添加tsconfig.json 支持typescript语言开发

tsc --init

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "jsx": "react",
    "moduleResolution": "node",
    "strict": true,
    "noEmit": true,
    "allowJs": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

6. 配置webpack

  • entry 指出应用程序的入口文件
  • output 指出webpack打包后的应用程序文件目录
  • modules 配置文件转换规则

// webpack.config.js

const { resolve } = require("path");
const HtmlWebpackPlugin=require("html-webpack-plugin");
const TerserWebpackPlugin=require("terser-webpack-plugin");

const isProd=process.env.NODE_ENV === "production";

const config={
  mode: isProd ? "production" : "development",
  entry: {
    index: "./src/index.tsx",
  },
  output: {
    path: resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
      inject: "body",
    }),
  ],
};

if (isProd) {
  config.optimization={
    minimizer: [new TerserWebpackPlugin()],
  };
} else {
  config.devServer={
    port: 9000,
    open: true,
    hot: true,
    compress: true,
    stats: "errors-only",
    overlay: true,
  };
}

module.exports=config;

7. 添加React相关文件

  • index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Webpack with React TS</title>
  </head>
  <body></body>
</html>
  • index.tsx
import React from 'react'
import { render } from 'react-dom'
import App from './App'
 
render(<App />, document.body)
  • App.tsx
import React from "react";
const App: React.FC:(props) => {
  return <div>Webpack is cool!</div>;
};
 
export default App;

8. 启动应用

  • yarn dev : 启动开发服务器
  • yarn build : 打包应用
  • yarn start : 启动产品服务

[参考] https://www.skcript.com/svr/using-webpack-with-react-typescript