javascript - Webpack 别名指向未配置 webpack 的父目录

Question

我有一个项目，它不直接在根目录中包含 webpack，它安装在我的根目录中的 website 文件夹中。

project
-> src
   -> App.js
   -> Hello.js
   -> index.js
-> website
   -> webpack.config.js
   -> index.js
   -> package.json

在我的 webpack.config.js 文件中，我添加了一个别名条目来指向我的组件文件夹:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    alias: {
      '@my-app/components': path.resolve(__dirname, '../src/'),
    }
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
}

问题是:当我尝试像这样导入组件时 import { Hello } from '@my-app/components'; 并且我尝试 npm run build >，我收到此错误消息:

ERROR in ../src/Hello.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/.../my-new-proj/src/Hello.js: Unexpected token (4:2)

我不确定这个问题是否只是因为我将组件别名指向一个没有自己的 webpack 配置的父目录或其他东西而引起的。

我将我的代码推送到了 github，以便您可以看到完整的文件夹结构:https://github.com/osnysantos/my-new-project

Answer 1

您的问题与 webpack 别名无关。如果您按照发出的错误进行操作，您将看到 babel-loader 无法识别 JSX。我看到你已经将react-presets添加到你的babelrc文件中，但是这些似乎被你的webpack配置覆盖了。从 webpack 配置中删除预设数组，或向其中添加 React 预设。