1

我只是尝试将 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 下。

有任何想法吗？感觉就像是反应路由器或 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,
    },
4

1 回答 1

4

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

entry: ['babel-polyfill', './src/index.js'],
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
    publicPath: '/'
},
于 2018-06-26T09:00:53.377 回答