似乎无法使用别名在 Webpack 5 中导入答案

【问题标题】：Can't seem to use Aliases for importing in Webpack 5似乎无法使用别名在 Webpack 5 中导入
【发布时间】：2022-01-06 14:39:22
【问题描述】：

我有一个小项目，我希望能够为 src 配置路径，这样我就不必非常深入地导入东西，我已经看到了示例，出于某种原因，我的 TS 配置似乎包含 no_modules即使它被排除在外。

在我看来这是基本 url 的问题，或者可能缺少某些模块，但我不知道它是什么，错误太模糊我不知道，路由老实说似乎很好......

{
"compilerOptions": {
  "sourceMap": true,
  "target": "es5",
  "lib": [
    "es6",
    "dom",
    "dom.iterable",
    "esnext"
  ],
  "baseUrl": "src",
  "paths": {
    "@/*": [
      "./*"
    ]
  },
  "allowJs": true,
  "skipLibCheck": true,
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "strict": true,
  "forceConsistentCasingInFileNames": true,
  "module": "esnext",
  "moduleResolution": "node",
  "resolveJsonModule": true,
  "isolatedModules": true,
  "suppressImplicitAnyIndexErrors": true,
  "noEmit": true,
  "jsx": "react"
},
"include": [
  "src"
],
"exclude": [
  "node_modules",
  "**/node_modules/*"
]

}

这是我的 TS 配置...

  {
  "name": "bootstrap-webpack-5-typescript-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "private": true,
  "scripts": {
    "start": "webpack serve",
    "watch": "webpack --watch",
    "build": "NODE_ENV=production webpack",
    "build-dev": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@babel/preset-react": "^7.14.5",
    "@types/react-router-dom": "^5.3.1",
    "babel-loader": "^8.2.3",
    "babel-plugin-styled-components": "^1.13.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.4.0",
    "html-webpack-plugin": "^5.4.0",
    "mini-css-extract-plugin": "^2.4.2",
    "postcss": "^8.3.11",
    "postcss-loader": "^6.2.0",
    "postcss-preset-env": "^6.7.0",
    "redux-devtools-extension": "^2.13.9",
    "sass": "^1.43.3",
    "sass-loader": "^12.2.0",
    "ts-loader": "^9.2.6",
    "tsconfig-paths": "^3.12.0",
    "typescript": "^4.4.4",
    "webpack": "^5.59.1",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.3.1"
  },
  "dependencies": {
    "@types/jest": "^27.0.2",
    "@types/node": "^16.11.4",
    "@types/react": "^17.0.31",
    "@types/react-dom": "^17.0.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.5",
    "react-router-dom": "^5.3.0",
    "redux": "^4.1.1",
    "redux-thunk": "^2.3.0",
    "style-loader": "^3.3.1",
    "styled-components": "^5.3.3"
  },
  "resolutions": {
    "styled-components": "^5.3.3"
  }
}

最后是我的错误...

请注意我使用的是 Webpack 5

【问题讨论】：

标签： reactjs typescript path package.json tsconfig

【解决方案1】：

我不知道你为什么要把路径解析放在tsconfig.json 文件中。但是，正如我所见，您正在使用 Webpack；使用 Webpack 的方法是使用解析配置。

https://webpack.js.org/configuration/resolve/#resolvealias

在你的情况下：

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      '@/': path.resolve(__dirname, 'src/'),
    },
  },
};

【讨论】：

我尝试在 TS 中删除路径并在我的 webpack 中添加此解析，但结果完全相同。