在 JavaScript 项目中使用路径别名配置 Webpack

Question

我正在开发一个 JavaScript 项目，但在配置 Webpack 来正确解析我在 jsconfig.json 文件中设置的路径别名时遇到问题。情况是这样的：

设置： 项目结构： 项目根/src/pages/home.jsx

jsconfig.json

  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "baseUrl": "src",
    "paths": {
      "@page/*": ["pages/*"]
    }
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "build"
  ]
}

webpackconfig.js

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    alias: {
      '@page': path.resolve(__dirname, 'src/pages/')
    },
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000
  },
  mode: 'development'
};

问题： 尽管在 jsconfig.json 和 webpack.config.js 中都设置了 @page 的别名，但在尝试运行项目时出现以下错误：

Module not found: Error: Can't resolve '@page/home' in 'C:\Users\HIMANSHU RAJ\OneDrive\Desktop\Interior Design\frontend\src'

我尝试过的：

验证文件 home.jsx 存在于 src/pages/ 目录中。 检查文件名和路径中的拼写错误。 重新启动开发服务器并清除缓存。

问题：

我的 Webpack 配置对于处理路径别名是否正确？ 我需要申请 Webpack 来解析这些别名吗？是否需要任何其他设置？ jsconfig.json 中设置路径别名的方式是否存在影响 Webpack 的问题？

任何帮助或建议将不胜感激！

Answer 1

我认为您缺少

.babelrc

文件来解析您的别名。

将以下内容添加到您的

.babelrc

文件中：-

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "@page": "./src/pages"
        }
      }
    ]
  ]
}

还有，做

npm install --save-dev babel-plugin-module-resolver

这应该可以解决您的问题。您也可以参考这个线程