Webpack Не удается разрешить другие модули при сборке в моем шаблонном проекте

Question

Я создал проект пластины Boilder с веб-пакетом, реакцией, машинописью и т. Д., Но всякий раз, когда я строю свой проект, веб-пакет генерирует эти ошибки в моей точке входа, которая не может разрешить другие модули (это просто простой компонент входа в систему) Это сообщение об ошибке моего веб-пакета

ERROR in ./src/index.tsx
Module not found: Error: Can't resolve './components/Login' in '/Users/myname/Desktop/Projects/front/src'
 @ ./src/index.tsx 6:14-43

Это мой файл index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import Login from './components/Login';


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

И это мои компоненты входа в систему, которые веб-пакет не может разрешить

import * as React from 'react';

export default () => <div>Login</div>;

Это мой конфиг веб-пакета и сценарии package.json

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader',
        options: {
          useCache: true,
          reportFiles: ['src/**/*.{ts,tsx}']
        }
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'template/index.html'
    })
  ],
  mode: 'production',
  output: {
    path: path.resolve(__dirname, 'build/'),
    filename: 'bundle.[hash].js'
  },
  plugins: [new CleanWebpackPlugin()]
};

сценарии package.json

"scripts": {
    "build": "webpack"
  },

Я попытался свести к минимуму мой проект, чтобы вы могли сосредоточиться на этой единственной проблеме, почему взломать мой веб-пакет не может разрешить обычный файл компонента? Вы можете найти этот свернутый проект на https://github.com/sh2045/myproblem Вы можете просто клонировать его и запустить

npm i 
npm run build

и вы можете увидеть сообщение об ошибке, пожалуйста, помогите: (

Answer 1

Вместо использования awesome-typescript-loader, почему бы не попробовать загрузчик, рекомендованный webpack для машинописного текста

Чтобы решить вашу проблему,

Установите этот node пакет npm install --save-dev typescript ts-loader.Это загрузчик, который делает преобразование TS в JS.

Вам необходимо удалить awesome-typescript-loader и использовать ts-loader в webpack.config.js.Ниже обновленный webpack.config.js.Вы можете использовать эту конфигурацию и выполнить npm run build и убедиться, что ваш webpack связывает проект без ошибок

Измененный webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader'
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'template/index.html'
    })
  ],
  mode: 'production',
  output: {
    path: path.resolve(__dirname, 'build/'),
    filename: 'bundle.[hash].js'
  },
  plugins: [new CleanWebpackPlugin()]
};

Примечание Когда я загружал и настраивал ваш проект из вашего git, этот пакет npm i acorn --save отсутствовал в вашем package.json, я верю.поэтому мне пришлось установить его вручную