Какова правильная конфигурация веб-пакета для устранения ошибок 404 refre sh? - PullRequest
Новая
       24

Какова правильная конфигурация веб-пакета для устранения ошибок 404 refre sh?

1 голос
/ 15 января 2020

В настоящее время я занимаюсь разработкой веб-приложения React + Express, содержащего маршруты. Когда я go перехожу на маршрут, который не является моей домашней страницей, и я перевожу sh страницу, я получаю ошибку 404. Есть много постов, которые решают эту проблему, например, описанную здесь: https://tylermcginnis.com/react-router-cannot-get-url-refresh/, которую я пытался реализовать. Вот мое понимание проблемы:

  1. Go до http://locahost: 3000 , который загружает dist / index. html и dist / bundle. js ( который имеет все необходимые маршруты React)
  2. Go до http://localhost: 3000 / около , который является заранее определенным маршрутом, который обслуживает около. html
  3. Refre sh страницы - вы видите ошибку 404, говорящую, что индекс. html не определен в http://localhost: 3000 / около . Я понимаю, что это происходит потому, что при http://localhost: 3000 / около веб-приложение пытается получить индекс. html, но оно не найдено в папке dist/index.html. Я полагаю, что это происходит потому, что мой dist/index.html подается в память из конфигурации моего веб-пакета, и не было создано "реального" dist/index.html файла.

Вот мой файл конфигурации веб-пакета: 

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

module.exports = {
  entry: path.join(__dirname, './src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        // which files should babel be used on
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: ['babel-loader'],
      },
      {
        test: /\.css$/,
        use: [
          'style-loader', 'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    // copy the index.html file to the dist folder so that devServer can serve the static index.html file from dist folder
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
  // dist used to serve our application in browser
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 3000,
    compress: true,
    hot: true,
    proxy: {
      '/**': {
        target: 'http://localhost:5000',
        secure: false
      }
    }
  }
};

И мой индекс. html file: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>App</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

При использовании webpack-dev-server в сочетании с HtmlWebpackPlugin из того, что я прочитал в Интернете, он берет индекс шаблона. html файл, который я указал, и загружает его в память в мою папку dist. Физически он там не появляется - скорее, если вы go до http://localhost:3000/webpack-dev-server увидите индексный файл. html. То же самое происходит и с моим bundle.js файлом, который содержит весь мой JS код, на который ссылается мой файл index.html. Я думаю, он все это делает в памяти, потому что какой смысл загружать настоящий индексный файл. html в ваш файл. папка dist, если только вы не собираетесь работать, где вам нужно предоставлять файлы статически.

Если я правильно понял это, я должен поместить индексный файл. html, который ссылается на мой пакет. js файл в разработке в моей папке dist? Это было бы так же, как у меня выше, за исключением тега <script> для ссылки bundle.js. Мне просто кажется нелогичным иметь файл index.html в моей папке src, а также файл в папке dist только для "перезагрузки". Кроме того, зачем тогда использовать HtmlWebpackPlugin? какой смысл загружать индекс. html / bundle / js в память тогда?

...