如何通过react-app-rewired配置多entry入口支持monaco相关worker？

数据老陈

2026-10-1

问题原因

你直接全量覆盖config.entry的写法会丢失CRA内置的默认入口配置（包括开发环境的热更新注入逻辑、入口文件的内部路径解析规则等），因此会导致index.js加载异常。

正确实现方式

你只需要将CRA原有入口配置保留为main入口的值，再追加你需要的worker入口即可，同时需要配套修改多入口场景下的输出文件名规则，避免打包时文件名冲突：

// config-overrides.js
module.exports = function override (config) {
    // 保留CRA原生入口配置，追加worker入口
    config.entry = {
        main: config.entry,
        'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
        'yaml.worker': 'monaco-yaml/lib/esm/yaml.worker.js',
    }

    // 适配多入口的输出规则
    config.output.filename = 'static/js/[name].[contenthash:8].js'
    config.output.chunkFilename = 'static/js/[name].[contenthash:8].chunk.js'

    return config
}