React 可加载拆分文件在 React 路由器中使用了错误的路径

Question

我刚刚尝试将 react-loadable 添加到我的项目中，在我访问我的管理页面之前它工作正常。我目前有 webpack 4、react-router 4.2.2 和 react-loadable 5.4.0。我的 approuter 中有这样的东西：

<Route path="/admin/users" component={LoadableUsers} />

和可加载用户：

const LoadableUsers = Loadable({
    loader: () => import('../admin/components/user/Users'),
    loading: Loading,
})

访问 localhost:3000/admin/users 得到以下信息：

Refused to execute script from 'http://localhost:3000/admin/4.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

因为4.js（react-loadable拆分后的文件）不在/admin下，而是直接在root下

有什么想法吗？感觉像是 react-router 或 webpack 的问题...

我的 webpack 配置：

module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: {minimize: true}
                    }
                ]
            },
            {
                test: /\.s?css$/,
                use: [
                    devMode ? 'style-loader' : 'style-loader',
                    "css-loader",
                    {
                        loader: "sass-loader", options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: "[path][name].[hash].[ext]",
                        }
                    }
                ]
            }]
    },
    plugins: [
        new HtmlWebPackPlugin({
            inject: false,
            template: "./public/index.html",
            filename: "./index.html"
        }),
        new MiniCssExtractPlugin({
            filename: devMode ? '[name].css' : '[name].[hash].css',
            chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
        }),
    ],
    devtool: devMode ? 'cheap-module-eval-source-map' : 'source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        historyApiFallback: true,
    },

Answer 1

添加输出和条目以使其正常工作：

entry: ['babel-polyfill', './src/index.js'],
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
    publicPath: '/'
},

React 可加载拆分文件在 React 路由器中使用了错误的路径

React loadable splitted files are using wrong path with react router

webpack

react-router-v4

react-loadable