如何在 typescript react 应用程序中设置 webpack 配置

Question

我正在尝试在反应应用程序中设置 webpack 配置。添加 webpack 配置的目的是避免缓存构建文件。

用于开发观察模式和生产最小化构建。

以下是 webpack.config.ts

const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.ts',
    path: path.resolve(__dirname, 'dist'),
  },
};

package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.1.2",
    "@testing-library/user-event": "^12.2.2",
    "@types/enzyme": "^3.10.8",
    "@types/file-saver": "^2.0.2",
    "@types/jest": "^26.0.15",
    "@types/lodash": "^4.14.165",
    "@types/node": "^12.19.4",
    "@types/react-alert": "^5.2.0",
    "@types/react-dom": "^16.9.9",
    "@types/react-modal": "^3.10.6",
    "@types/react-redux": "^7.1.11",
    "@types/react-router-dom": "^5.1.6",
    "@types/react-select": "^3.0.27",
    "@types/react-table": "^7.0.25",
    "@types/react-test-renderer": "^17.0.0",
    "@types/redux-mock-store": "^1.0.2",
    "@types/styled-components": "^5.1.4",
    "axios": "^0.21.1",
    "axios-mock-adapter": "^1.19.0",
    "enzyme": "^3.11.0",
    "file-saver": "^2.0.5",
    "keycloak-js": "^11.0.3",
    "lodash": "^4.17.20",
    "node-sass": "^4.14.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-alert": "^7.0.2",
    "react-alert-template-basic": "^1.0.0",
    "react-bootstrap": "^1.4.3",
    "react-dom": "^17.0.1",
    "react-dropzone": "^11.3.2",
    "react-hook-form": "^6.13.1",
    "react-modal": "^3.12.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "react-select": "^3.1.1",
    "react-table": "^7.6.2",
    "react-test-renderer": "^17.0.1",
    "react-toastify": "^6.2.0",
    "redux": "^4.0.5",
    "redux-mock-store": "^1.5.4",
    "redux-thunk": "^2.3.0",
    "serve": "^12.0.0",
    "styled-components": "^5.2.1",
    "styled-icons": "^10.22.0",
    "ts-jest": "^26.4.4",
    "typescript": "^4.4.4",
    "wait-for-expect": "^3.0.2",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "develop": "webpack-dev-server --mode production"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react": "^17.0.3",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "html-webpack-plugin": "^5.4.0",
    "husky": "^4.3.0",
    "jest-teamcity-reporter": "^0.9.0",
    "lint-staged": "^10.5.1",
    "prettier": "2.1.2",
    "ts-loader": "^9.2.6",
    "ts-node": "^10.3.0",
    "webpack": "^5.59.1",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.3.1"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,css,md,ts,tsx}": "prettier --write"
  }
}

运行npm run develop 后出现以下错误

frontend@0.1.0 开发 /c/Users/ui/project webpack-dev-server --mode 生产

[webpack-cli] 无法加载 '/c/Users/ui/project/webpack.config.ts' 配置 [webpack-cli] webpack.config.ts:1:1 - 错误 TS1208: 'webpack.config.ts' 不能在 '--isolatedModules' 下编译，因为它被认为是一个全局脚本文件。添加导入、导出或空的“导出{}”语句以使其成为模块。

Answer 1

使用以下命令创建反应项目：

 yarn create react-app <project-name> --template typescript

构建：

yarn build

你不需要设置 webpack。