Браузер не может найти файлы (экспортированные через веб-пакет), когда я ввожу URL-адрес напрямую - PullRequest
Новая
       10

Браузер не может найти файлы (экспортированные через веб-пакет), когда я ввожу URL-адрес напрямую

0 голосов
/ 16 марта 2020

У меня есть веб-страница React со следующими маршрутами: 

localhost:8000/
localhost:8000/login
localhost:8000/auth/callback
localhost:8000/about/me

Мой индекс. js отображает некоторые кнопки, чтобы я мог посетить каждый из 4 маршрутов. Работает нормально. Здесь есть одна загвоздка: когда я набираю URL на странице AboutMe в адресной строке браузера, я получаю сообщение об ошибке ниже. То же самое касается обратного вызова, на который я хочу перенаправиться, когда я использую OAuth на странице Login .

Сообщение об ошибке (здесь: вход страницы AboutMe непосредственно в адресную строку): 

me:1 Refused to apply style from 'http://localhost:8000/about/woff.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

me:14 GET http://localhost:8000/about/main.bundle.min.js net::ERR_ABORTED 404 (Not Found)

Вопросы:

  • Найдет ли браузер dist / index. html, если я введу URL-адрес страница AboutMe напрямую?

    По факту да, поскольку он пытается загрузить woff. css и bundle. js. Этот импорт был введен в HTML веб-пакетом.

  • Почему он ищет таблицу стилей и скрипт в новом пути?
  • Почему маршрутизатор реагирует не удар?

Вот мой webpack.js: 

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const GoogleFontsPlugin = require('google-fonts-plugin');
const Dotenv = require('dotenv-webpack');

module.exports = {
  entry: './src/bootstrap/index.tsx',
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.less']
  },
  output: {
    path: path.join(__dirname, '/dist'),
    library: 'my-library-react', // Important
    libraryTarget: 'umd', // Important
    filename: '[name].bundle.min.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|tsx|ts)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          {
            loader: 'less-loader',
            options: {
              modifyVars: {
                hack: `true; @import "${__dirname}/src/theme/custom-theme.less";`
              },
              javascriptEnabled: true
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new Dotenv(),
    new HtmlWebpackPlugin({
      template: './src/bootstrap/index.html',
      filename: 'index.html', // destination
    }),
    new GoogleFontsPlugin('./src/theme/fonts.config.json')
  ]
};

1 Ответ

0 голосов
/ 17 марта 2020

В webpack.config. js должны быть применены следующие изменения: 

// ...

module.exports = {
  output: {
    path: path.join(__dirname, '/dist'),
    publicPath: '/',
    filename: '.bundle.js'
    // ...
  },
  devServer: {
    historyApiFallback: {
      index: '/'
    }
  }
  // ...
}
...