带有 historyApiFallback 的 Webpack 2 不工作答案

【问题标题】：Webpack 2 with historyApiFallback Not Working带有 historyApiFallback 的 Webpack 2 不工作
【发布时间】：2017-12-08 06:33:12
【问题描述】：

我不断收到Cannot GET /task 我试图用我在这里找到的解决方案修改我的 webpack，但我仍然明白。

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/app.js',
    output: {
        path: __dirname + '/dist',
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.s?css$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }, {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            }, {
                test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                loader: 'file-loader?name=fonts/[name].[ext]'
            }
        ]
    },
    devServer: {
        historyApiFallback: {
            index: '/index.html'
        },
        stats: true,
        inline: true,
        progress: true
    }
    plugins: [new HtmlWebpackPlugin({template: './src/index.html'})]
}

【问题讨论】：

您在运行 devServer 时遇到此错误？
@YuriRamos 不知道我的网址是否类似于“localhost:8080”。我点击一个按钮，它转到“localhost:8080/grades”。如果我在我的解决方案中进行更改，开发服务器将重新呈现页面，这就是我得到它的时候。

标签： reactjs webpack react-router webpack-2

【解决方案1】：

我认为客户端只有在路径为/ 时才会获得index.html。

尝试使用此设置。

devServer: {
    historyApiFallback: true
}

【讨论】：

很奇怪，我以为我试过了，但现在似乎成功了。
嘿，还有一件事，虽然我开始向我的路由添加参数，例如但是这个 historyapiFallback 不再起作用了。我没有得到 404，但我得到一个白屏。
@chobo2 相同的设置在我的应用程序中使用这种路径/task/:id 可以正常工作。我认为您的路线或组件有问题。组件未呈现，因此您会得到一个白屏。
嗯，也许，但不确定是什么。我确实看到了我的 bundle.js 的 404，所以当我做某事 /task/1 时它没有得到任何我的 javascript。不知道如何告诉我的路由来处理。
我想我需要添加一个“/”的 publicPath，因为我的 bundle src url 被构建为 src="/app.bundle.js" 而不是 src="app.bundle.js"