如何修改Create-react-app构建JS文件名的波浪号~为短横线？

当然能改！我之前帮不少开发者解决过这个问题——毕竟有些文件系统对特殊字符确实有限制。Create React App（CRA）默认的webpack配置里，runtime chunk的命名带了波浪号，但我们有两种靠谱的方式调整它：

方法一：通过eject暴露配置（不可逆） #

这个方法会把CRA封装的所有webpack配置都暴露出来，好处是能完全自定义配置，但注意操作不可逆，执行前记得备份代码：

• 首先在项目根目录执行命令：

  npm run eject
  

• 打开项目根目录下的config/webpack.config.js文件，找到runtimeChunk的配置段，默认是这样的：

  runtimeChunk: {
    name: entrypoint => `runtime~${entrypoint.name}`,
  },
  

• 把箭头函数里的波浪号~替换成连字符-，修改后变成：

  runtimeChunk: {
    name: entrypoint => `runtime-${entrypoint.name}`,
  },
  

• 保存文件后重新执行npm run build，你会发现/static/js/目录下的文件已经变成runtime-main.[hash].js了。

方法二：不eject，用社区工具修改配置（推荐） #

如果不想暴露核心配置，推荐用react-app-rewired和customize-cra来覆盖默认配置，步骤如下：

• 先安装所需依赖：

  npm install react-app-rewired customize-cra --save-dev
  

• 在项目根目录新建一个config-overrides.js文件，写入以下代码：

  const { override, adjustRuntimeChunk } = require('customize-cra');
  
  module.exports = override(
    adjustRuntimeChunk((runtimeChunk) => {
      // 替换runtime文件名里的波浪号为连字符
      if (typeof runtimeChunk.name === 'function') {
        const originalNameFn = runtimeChunk.name;
        runtimeChunk.name = (entrypoint) => originalNameFn(entrypoint).replace('~', '-');
      }
      return runtimeChunk;
    })
  );
  

• 修改package.json里的scripts命令，把原来的react-scripts替换成react-app-rewired：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
  

• 最后执行npm run build，生成的runtime文件名就会变成runtime-main.[hash].js，完全符合你的要求。

两种方法都能解决问题，如果你希望保留CRA的封装结构，优先选方法二；如果需要深度自定义webpack配置，方法一更适合你。

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