Как веб-пакет devServer может принимать другие пути, кроме root / в браузере?

Question

Я следовал настройке веб-пакета от https://createapp.dev/, а затем перевел свои источники из create-реакции-приложения в веб-пакет. Но у меня есть проблема для горячего перезаписи. Браузер не может принимать любые пути маршрутизатора, за исключением случаев, когда я редактировал страницы, за исключением /.

Когда я запускаю devpackver webpack с помощью 'запуска пряжи', горячая перезагрузка хороша для '/', например: http://localhost:4000. но не удается найти другие пути, например "/ main", "/ login" и т. Д. ... Сообщение об ошибке, например, когда я пытался обновить / main, затем я получил 'Cannot GET / main'. Я попытался найти некоторые ресурсы, такие как добавление «inline: true» в настройках веб-пакета, а также добавил hot.

Я также нахожу статью других людей, но они показывают / загружают горячую перезагрузку только в отличие от горячей перезагрузки других компонентов страницы. .

Я также ссылался на этот сайт. https://github.com/gaearon/react-hot-loader/issues/1150

// webpack.config.js
const webpack = require('webpack');
const path = require('path');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
    entry: [ 'react-hot-loader/patch', 'react-hot-loader/babel', './src/index.tsx' ],
    output: {
        publicPath: './dist',
        path: path.resolve(__dirname, 'dist'),
        filename: '[id].bundle.js',
        chunkFilename: '[id].js' // will auto assign a id to your separate chunks
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ],
                exclude: /\.module\.css$/
            },
            {
                test: /\.ts(x)?$/,
                use: [ 'awesome-typescript-loader' ],
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            modules: true
                        }
                    }
                ],
                include: /\.module\.css$/
            },
            {
                test: /\.svg$/,
                use: 'file-loader'
            },
            {
                test: /\.png$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            mimetype: 'image/png'
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: [ '*', '.js', '.jsx', '.tsx', '.ts', '.css', '.sa' ],
        alias: {
            'react-dom': '@hot-loader/react-dom'
        }
    },
    devServer: {
        port: 4000,
        contentBase: './dist',
        proxy: {
            '/myserver': {
                target: {
                    host: 'localhost',
                    protocol: 'http:',
                    port: 8080
                }
            }
        },
        hot: true
    },
    "devtool": "source-map",
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
        new LodashModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: 'index.html',
            inject: false,
            appMountId: 'app'
        })
    ],
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                }
            }
        }
    }
};

module.exports = (env, argv) => {
    if (argv.hot) {
        // Cannot use 'contenthash' when hot reloading is enabled.
        config.output.filename = '[name].[hash].js';
    }

    return config;
};

//index.tsx
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import "core-js/modules/es.promise";
import "core-js/modules/es.array.iterator";

if (module.hot) {
    ReactDOM.render(<App />, document.getElementById('app'));
    module.hot.accept();
}

//App.tsx
import { store, persistor } from './redux/store';
import Framework from './layouts/Framework';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import * as React from 'react';
import { hot } from 'react-hot-loader/root'

class App extends React.Component {
    render() {
        return (
            <div>
                <Provider store={store}>
                    <PersistGate loading={null} persistor={persistor}>
                        <Framework />
                    </PersistGate>
                </Provider>
            </div>
        );
    }
}
export default hot(App);

Общий

/ => Успешная горячая перезагрузка в браузере после изменения компонента или обновления в браузере

/ main, /firstComp, / secondComp и т. д ... => ошибка горячей перезагрузки в браузере после изменения компонента или обновления в браузере. он показывает, что не может получить / {адрес страницы}

Я хочу получить горячую перекодировку любой страницы из моего веб-пакета.

Спасибо.

Answer 1

Раньше я не видел подобной настройки веб-пакета, я делю на части, я опубликую эти части здесь на случай, если это поможет вам.

entry: "./src/App.js", // This is the component were I wrap routes in app
  output: {
    publicPath: './dist',
    path: path.resolve(__dirname, "dist"),
    filename: "[id].bundle.js",
    chunkFilename: "[id].js", // will auto assign a id to your separate chunks
  },

import React from 'react';
import Routes from './routes/routes'; // Figured I would show you that
const App = () => {
    return ( <div><Routes /></div> );
}

export default App;

resolve: {
    extensions: ["*", ".js", ".jsx", ".css", ".sa"]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new CompressionPlugin({
      cache: true,
      algorithm: "gzip",
      compressionOptions: {
        level: 5,                               
        minRatio: 0.8
      }
    }),
    new BundleAnalyzerPlugin({
      options: {
        generateStatsFile: true
      }
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html" // The path to your html
    })
  ],
  devServer: {
    contentBase: "./dist", // Where my file bundles are served from served from
    hot: true            // Enable hot loading
  },
  "devtool": "source-map"
};

Тогда в моем index.js включите hot;

import App from './App';


ReactDOM.render(<App />, document.getElementById('root'));
module.hot.accept();

У меня были проблемы с тем, чтобы заставить это работать, пока я не обнаружил, что мне нужен этот импорт, также в верхней части index.js

import "core-js/modules/es.promise";
import "core-js/modules/es.array.iterator";

Есть так много частей веб-пакета, чтоУ меня нет никакого опыта, так что, надеюсь, это поможет.