Question

我只是试图将react-loadable添加到我的项目中，并且在我访问管理页面之前，它可以正常工作。我目前有webpack 4，react-router 4.2.2和react-loadable 5.4.0。我的approuter中有类似的内容：

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

和LoadableUser：

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下，而是直接在根下。

有什么想法吗？感觉就像是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 Router使用错误的路径

1 个答案: