Webpack devserver反应路由器BrowerRouter 404答案

【问题标题】：Webpack devserver react router BrowerRouter 404Webpack devserver反应路由器BrowerRouter 404
【发布时间】：2021-01-20 12:15:09
【问题描述】：

我知道之前有人问过这个问题，但我已经为此奋斗了几个小时，我找不到将 react 路由器与 BrowserRouter 和 webpack 开发服务器一起使用的本地开发设置的工作设置。

当我转到任何不是 index.html 的路线时，我会收到 404 错误。我从这个 blospost https://ui.dev/react-router-cannot-get-url-refresh/ 开始从这里的问题中尝试了多种配置，但我无法使其工作。

我确实在初始控制台输出中看到：

ℹ ｢wds｣: Project is running at http://localhost:3000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/danielfrg/workspace/nbviewer.js/dist
ℹ ｢wds｣: 404s will fallback to /
ℹ ｢wdm｣: Hash: 3409aa1e47265f63217d

所以我预计 404 会退回到 / 但它没有这样做。

这是我的 webpack.config.js：

var path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const FileManagerPlugin = require("filemanager-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
    .BundleAnalyzerPlugin;

const extractPlugin = {
    loader: MiniCssExtractPlugin.loader,
};

module.exports = (env, argv) => {
    const IS_PRODUCTION = argv.mode === "production";

    const config_dist = {
        entry: [path.resolve(__dirname, "src", "index.js")],
        output: {
            path: path.resolve(__dirname, "dist"),
            filename: "nbviewer.js",
            publicPath: "/",
        },
        module: {
            rules: [
                {
                    test: /\.(js)$/,
                    exclude: /node_modules/,
                    use: ["babel-loader"],
                },
                {
                    test: /\.s?[ac]ss$/,
                    use: [extractPlugin, "css-loader", "sass-loader"],
                    // use: ["null-loader"],
                },
                // Bundle Jupyter Widgets and Font Awesome
                {
                    test: /\.(eot|ttf|woff|woff2|svg|png|gif|jpe?g)$/,
                    loader: require.resolve("url-loader"),
                    // loader: require.resolve("file-loader"),
                    // options: {
                    //     name: "[name].[ext]?[hash]",
                    // outputPath: "assets/",
                    // },
                },
            ],
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, "src", "index.html"),
            }),
            new MiniCssExtractPlugin({
                filename: "index.css",
            }),
            new FileManagerPlugin({
                onEnd: {
                    copy: [
                        {
                            source: path.resolve(__dirname, "static"),
                            destination: path.resolve(__dirname, "dist"),
                        },
                    ],
                },
            }),
            // new BundleAnalyzerPlugin(),
        ],
        devServer: {
            port: 3000,
            // contentBase: "/",
            contentBase: path.resolve(__dirname, "dist"),
            historyApiFallback: { index: "/" },
            publicPath: "/",
        },
        node: {
            fs: "empty",
        },
        mode: IS_PRODUCTION ? "production" : "development",
        devtool: "source-map",
    };

    let config = [config_dist];

    return config;
};

这里的解决方案是否像其他一些问题提到的那样使用代理？看起来有些人没有它就可以工作。感谢您的帮助！

【问题讨论】：

标签： webpack react-router webpack-dev-server

【解决方案1】：

在使用不同的 URL 后，我注意到一个基本 url，如：http://localhost:3000/asdf 确实被重定向，在我的情况下，我正在测试具有扩展名的文件，所以它总是失败。

要修复它，我只需添加：disableDotRule: true。

      devServer: {
            port: 3000,
            contentBase: path.resolve(__dirname, "dist"),
            historyApiFallback: { index: "/", disableDotRule: true },
      }

希望这对将来的某人有所帮助！

【讨论】：