如何阻止CRA打包器生成带前置点的文件？

• 使用Create React App（CRA）开发项目，引入第三方富文本编辑器@syncfusion/ej2-richtexteditor，并导入其样式：

  @import '../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css';
  

• 该样式依赖按钮样式字体，构建时CRA打包器会将这类资源压缩并生成以前置点开头的随机文件名（例如.c5f6158ac1190f9247b0）。
• 本地Windows服务器可正常访问该文件，但部署到Linux服务器后请求返回404——原因是Linux默认将前置点开头的文件视为隐藏文件，禁止外部访问。
• 需求：配置打包器避免生成带前置点的文件名，且项目已配置CRACO，希望借助CRACO实现。

可以通过CRACO修改Webpack的资源输出规则，避免生成以点开头的资源文件名，具体步骤如下：

1. 在项目根目录的craco.config.js中，添加Webpack配置的修改逻辑：

   module.exports = {
     webpack: {
       configure: (webpackConfig) => {
         // 修改所有asset/resource类型规则的文件名生成逻辑
         webpackConfig.module.rules.forEach(rule => {
           if (rule.type === 'asset/resource') {
             rule.generator.filename = rule.generator.filename.replace(/^\./, '');
           }
         });
   
         // 修改全局的资源文件名规则
         if (webpackConfig.output.assetModuleFilename) {
           webpackConfig.output.assetModuleFilename = webpackConfig.output.assetModuleFilename.replace(/^\./, '');
         }
   
         return webpackConfig;
       }
     }
   };
   

2. 原理说明：

   • CRA默认的Webpack配置中，字体这类资源文件的输出文件名规则会生成以.开头的哈希名，通过修改asset/resource规则的generator.filename和全局的output.assetModuleFilename，可以移除文件名开头的点。
   • 修改后，打包生成的资源文件名会变成类似c5f6158ac1190f9247b0（无前缀点），Linux服务器就能正常访问。

3. 验证步骤：

   • 执行npm run build重新构建项目，查看build目录下的资源文件，确认文件名不再以点开头。
   • 部署到Linux服务器后测试访问，确认404问题解决。

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