Файлы вывода Webpack не найдены после проксирования в приложение React - PullRequest
Новая
       82

Файлы вывода Webpack не найдены после проксирования в приложение React

0 голосов
/ 28 мая 2020

У меня два приложения. Одно из них - приложение Angular, которое служит моим основным пользовательским интерфейсом. Другой - приложение React. Мне нужно прокси-запросы от приложения Angular к приложению React.

Приложение Angular содержит эту конфигурацию proxy.conf. json: 

"/parts": {
    "target": "https://my-application-url.my-domain.com/",
    "secure": true,
    "logLevel": "info",
    "changeOrigin: true,
    "pathRewrite": {
        "^/parts": ""
    }
}

проксирование на приложение React работает нормально - прокси-сервер перенаправляет при обнаружении пути /parts и некоторые части приложения React загружаются правильно.

Проблема в том, что приложение React по этому URL-адресу обнаруживает 404 ошибки при попытке загрузки JS файлов приложений. На вкладке «Сеть» в консоли разработчика я вижу эти ошибки: 

Request URL: https://my-application-url.my-domain.com/js/app.bundle.js
Status Code: 404 Not Found

и 

Request URL: https://my-application-url.my-domain.com/js/vendor.bundle.js
Status Code: 404 Not Found

Я считаю, что эти ошибки вызваны ошибками в моей конфигурации Webpack для приложения React, но я не могу понять, каково решение.

Это файл конфигурации Webpack для приложения React: 

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

const URL = process.env.URL || '/parts';

const config = {
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      },
      {
        test: /\.(png|svg|jpg)$/,
        loader: 'file-loader',
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader'
    ],
  },
  entry: {
    app: ['./src/app/index.tsx'],
    vendor: ['react', 'react-dom'],
  },
  target: 'web',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].bundle.js',
    publicPath: "/",
  },
  plugins: [],
};

module.exports = (envr) => {
  const envName = envr || process.env.ENV_NAME;
  const isDev = (envName === 'DEV');

  if(isDev) {
    config.devtool = 'source-map';
    config.mode = 'development';
    config.plugins = [
      new webpack.DefinePlugin({
        APPLICATION: {
          ENVIRONMENT: JSON.stringify(URL),
        },
        ROOT_PATH: JSON.stringify(URL),
        GATEWAY_PATH: JSON.stringify(process.env.GATEWAY_PATH),
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      }),
    ];

    config.devServer = {
      contentBase: path.resolve(__dirname, 'dist'),
      compress: true,
      inline: true,
      hot: true,
      disableHostCheck: true,
      allowedHosts:
        'localhost.my-domain.com',
      ],
      port: 8080,
    };
  } else {
    config.mode = 'production';
  }

  config.plugins = [...config.plugins,
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'app', 'index.html'),
      title: 'React App',
    }),
  ];

  return config;
};

Приложение React запускается на моем локальном компьютере с помощью этой команды: npx webpack-dev-server --env DEV

После многих попыток я не могу определить, как разрешить файл js/app.bundle.js. Как настроить Webpack так, чтобы этот файл успешно загружался после проксирования?

...