Refre sh дает ошибку 404 в производственной сборке webpack для реактивного маршрутизатора - PullRequest
Новая
       126

Refre sh дает ошибку 404 в производственной сборке webpack для реактивного маршрутизатора

0 голосов
/ 06 августа 2020

Это код htaccess в каталоге publi c 

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Я попытался переписать его на 

RewriteBase /
RewriteCond %{REQUEST_URI} !^/(assets/?|$)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Вот мой файл webconfig 

/**
 * Main file of webpack config.
 * Please do not modified unless you know what to do
 */
import webpack from 'webpack';
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebpackRTLPlugin = require("webpack-rtl-plugin");
const WebpackMessages = require("webpack-messages");
const del = require("del");
const ASSET_PATH = process.env.ASSET_PATH || '/';

// theme name
const themeName = "metronic";
// global variables
const rootPath = path.resolve(__dirname);
const distPath = rootPath + "/build";

const entries = {
    "sass/style.react": "./src/index.scss"
};

const mainConfig = function () {
    return {
        devServer: {
            historyApiFallback: true,
        },
        mode: "development",
        stats: "errors-only",
        performance: {
            hints: false
        },
        entry: entries,
        output: {
            // main output path in assets folder
            path: distPath,
            // output path based on the entries' filename
            filename: "[name].js",
            publicPath: ASSET_PATH,
        },
        resolve: {extensions: ['.scss']},
        plugins: [
            // webpack log message
            new WebpackMessages({
                name: themeName,
                logger: str => console.log(`>> ${str}`)
            }),
            new webpack.DefinePlugin({
                'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH),
              }),
            // create css file
            new MiniCssExtractPlugin({
                filename: "[name].css",
            }),
            new WebpackRTLPlugin({
                filename: "[name].rtl.css",
            }),
            {
                apply: (compiler) => {
                    // hook name
                    compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
                        (async () => {
                            await del.sync(distPath + "/sass/*.js", {force: true});
                        })();
                    });
                }
            },
        ],
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        "css-loader",
                        {
                            loader: "sass-loader",
                            options: {
                                sourceMap: true,
                            }
                        },
                    ]
                },
            ]
        },
    }
};

module.exports = function () {
    return [mainConfig()];
};

Вот мой базовый редирект 

ReactDOM.render(
  <HttpsRedirect>
    <App
      store={store}
      persistor={persistor}
      basename={PUBLIC_URL}
    /></HttpsRedirect>,
  document.getElementById("root")
);
...