Webpack не может обнаружить псевдоним абсолютных путей

Question

Я пытаюсь настроить конфигурацию веб-пакета для моего приложения реакции.Моя структура папок:

|--App
  |--webpack.config.js
  |--package.json
  |--src
    |--index.js
    |--Components
      |--Test.js

Код в webpack.config.js

const path = require('path');
const webpack = require('webpack');
var DESTINATION_PATH = path.resolve(__dirname, 'Build');
var SOURCE_PATH = path.resolve(__dirname, 'src');

module.exports = {
    context: SOURCE_PATH,
    entry: path.join(SOURCE_PATH + '/index.js'),
    output: {
        path: DESTINATION_PATH,
        filename: 'main.bundle.js'
    },
    module: {
        rules: [
            { test: /\.css$|\.scss$/, loader: ['style-loader', 'css-loader'] },
            { test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.eot$/, loader: "url-loader" },
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    presets: ["@babel/preset-env", "@babel/react"]
                }
            }
        ]
    },
    mode: 'development',
    resolve: {
        alias: {
            path: path.resolve(__dirname, 'src')
        },
        extensions: [".js", ".json", ".jsx"]
    }
};

Код в index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import Test from 'Component/Test';

ReactDOM.render(<Test/>, document.getElementById('root'));

Я получаю следующую ошибку при запуске команды webpack в консоли:

Error: Module not ERROR in ./index.js
Module not found: Error: Can't resolve 'Component/Test' in 'F:\DirName\Solution\POC2\src'

Я также попробовал конфигурацию .env с плагином dotenv-webpack .По-прежнему получаю ту же ошибку.

Полагаю, я не могу правильно сформировать пути в webpack.config.

Answer 1

Ваш baseurl выглядит так: path.join(__dirname, "src"), но webpack ищет файлы в app.Вместо этого вы должны попытаться изменить SOURCE_PATH на ./app/src.В качестве альтернативы ./../app/src.

Поскольку вы думали, что вышеизложенное было неясно ...

Изменение: var SOURCE_PATH = path.resolve(__dirname, 'src');

К: var SOURCE_PATH = path.resolve(__dirname, './app/src');

Или: var SOURCE_PATH = path.resolve(__dirname, './../app/src');

Поскольку вы не публикуете свой файл app.js, я больше ничего не могу для вас сделать.