使用CRACO修改CRA的asset-manifest.json后开发模式无法访问assets.json如何解决

问题根因 #

CRA默认开启了webpack-dev-server的historyApiFallback能力，所有未匹配到静态资源的请求都会被重定向返回index.html。官方自带的asset-manifest.json被默认加入了该规则的排除列表，你自定义生成的assets.json不在排除列表中，因此请求会被 fallback 到首页内容。

解决方案 #

在你的CRACO配置中新增devServer配置项，将assets.json加入historyApiFallback的排除规则即可，修改后的完整配置参考如下：

const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
    webpack: {
        plugins: {
            // 建议保留移除默认ManifestPlugin的配置，避免生成冗余文件
            remove: ['ManifestPlugin'],
            add: [
            new ManifestPlugin({
                fileName: 'assets.json',
                generate: (seed, files, entrypoints) => {
                    const js = [],
                        css = [];
                    files.forEach((file) => {
                        if (file.path.endsWith('.js') && file.isInitial) {
                            js.push({ value: file.path, type: 'entry' });
                        }
                        if (file.path.endsWith('.css') && file.isInitial) {
                            css.push({ value: file.path, type: 'entry' });
                        }
                    });
                    return { js, css };
                },
            })
            ]
        }
    },
    // 新增devServer配置调整重定向规则
    devServer: (config) => {
        config.historyApiFallback.rewrites = config.historyApiFallback.rewrites || [];
        config.historyApiFallback.rewrites.unshift({
            from: /^\/assets\.json$/,
            to: '/assets.json'
        });
        return config;
    }
};

修改后重启开发服务，即可正常访问/assets.json路径获取对应资源内容。

内容的提问来源于stack exchange，提问作者Trj