如何在CRA中禁用HMR（热模块替换）与文件打包功能？

一、禁用HMR（热模块替换） #

CRA默认使用Fast Refresh作为热更新方案，禁用它就能关闭HMR，回到全页面刷新模式：

• 临时生效：启动项目时直接传入环境变量

  FAST_REFRESH=false npm start
  

• 永久配置：修改package.json的start命令

  "scripts": {
    "start": "FAST_REFRESH=false react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test"
  }
  

• 使用Craco时的配置：在craco.config.js中添加devServer配置

  module.exports = {
    devServer: {
      hot: false,
      liveReload: true
    },
    reactScriptsVersion: "react-scripts"
  };
  

二、禁用文件打包（输出原生ES模块） #

CRA默认会将所有代码打包成单文件（比如main.js），要真正禁用打包，需要让webpack输出原生ES模块，每个文件单独加载。推荐用Craco（无需eject）或者直接eject修改配置：

方法1：使用Craco配置 #

1. 安装Craco：npm install @craco/craco --save-dev
2. 替换package.json的scripts为Craco命令：

   "scripts": {
     "start": "FAST_REFRESH=false craco start",
     "build": "craco build",
     "test": "craco test"
   }
   

3. 在项目根目录创建craco.config.js，添加以下配置：

   const path = require('path');
   
   module.exports = {
     webpack: {
       configure: (webpackConfig) => {
         // 禁用代码分割，避免生成额外chunk
         webpackConfig.optimization.splitChunks = false;
         webpackConfig.optimization.runtimeChunk = false;
         
         // 修改输出为原生ES模块
         webpackConfig.output = {
           ...webpackConfig.output,
           filename: '[name].js',
           chunkFilename: '[name].js',
           libraryTarget: 'module',
           module: true,
         };
         
         // 启用ES模块输出实验特性
         webpackConfig.experiments = {
           ...webpackConfig.experiments,
           outputModule: true,
         };
         
         // 禁用代码压缩，保留原始文件结构
         webpackConfig.optimization.minimize = false;
         
         return webpackConfig;
       },
     },
     devServer: {
       static: {
         directory: path.resolve(__dirname, 'public'),
       },
       // 设置响应头确保模块能被正确识别
       headers: {
         'Content-Type': 'application/javascript; charset=utf-8',
       },
     },
   };
   

4. 修改public/index.html中的脚本引用，添加type="module"：

   <script type="module" src="%PUBLIC_URL%/main.js"></script>
   

方法2：Eject后修改配置 #

如果已经eject项目，直接修改config/webpack.config.js：

• 找到output配置项，添加module: true和libraryTarget: 'module'
• 开启experiments.outputModule = true
• 设置optimization.splitChunks = false、optimization.runtimeChunk = false、optimization.minimize = false
• 同样修改index.html的脚本为type="module"

注意事项 #

• 禁用打包后，开发环境会加载单个模块文件，网络请求数量会增加，这是正常现象，适合需要调试单个文件的场景
• 生产环境不建议禁用打包，会导致加载性能下降

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