craco build 更改 static 文件名称

当我们把一个项目部署上线时候，只需要把前端代码放到服务器，然后添加nginx配置即可;
build文件结构如下：

image.png
nginx添加如下配置即可

location / {
    root $root/build;
    gzip_static on;
    try_files $uri $uri/ /index.html =404;
    proxy_set_header Access-Control-Allow-Origin *;
    add_header Cache-Control no-cache;
}

但是当我们现在的项目作为二级域名访问时候，我们不仅需要在<Router>中添加basename，还要对静态资源进行代理，我们打包时候，静态资源默认到/static文件夹中，这样当我们部署多个时候，static也会重复，所以我们需要把不同项目的静态打包到不同文件夹下。

具体思路如下

1. public文件中添加config.js，config中包含 basename: '/xxxx' 的配置
2. index.tsx中的<Router basename="xxxx">
3. 把静态资源打包到 xxxx_static文件夹中

• 使用output中的filename和chunkFilename修改js路径
• 使用plugin中的MiniCssExtractPlugin修改css路径
• 使用output.assetModuleFilename和mudule.rules修改media路径
• 使用FileManagerPlugin move config.js 到 /build 文件夹中

/public/config.js

window.__GLOBAL_RUNTIME__ = {
  ...
  baseName: '/xxxx',
}

/src/index.tsx

...
<Router basename={`${baseName}`}>
...

craco.config.js

...
// 添加配置
const { whenProd } =  require('craco')
const FileManagerPlugin = require('filemanager-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const STATIC_NAME = 'xxxx_static'
if (process.env.NODE_ENV === 'production') process.env.PUBLIC_URL = `/${STATIC_NAME}`

module.exports = {
  ...,
  webpack: {
    configure: (config, {env}) => {
      ...
      // 修改 js 路径
      config.output.filename = `${STATIC_NAME}/js/[name].[contenthash:8].js`
      config.output.chunkFilename = `${STATIC_NAME}/js/[name].[contenthash:8].chunk.js`
      
      // 修改 css 路径
      config.plugins = config.plugins.map((plugin) => {
        whenProd(() => {
          if (plugin instanceof MiniCssExtractPlugin) {
            Object.assign(plugin.options, {
              filename: `${STATIC_NAME}/css/[name].[contenthash:8].css`,
              chunkFilename: `${STATIC_NAME}/css/[name].[contenthash:8].chunk.css`,
            })
          }
        })
        return plugin
      })

       // 修改 media 路径
      config.output.assetModuleFilename = `${STATIC_NAME}/media/[name].[contenthash:8].[ext]`
      config.module.rules = config.module.rules.map((rule) => {
        if (rule.oneOf) {
          rule.oneOf = rule.oneOf.map((oneOfRule) => {
            if (oneOfRule.use) {
              oneOfRule.use.forEach(useItem => {
                if (useItem.options && useItem.options.name) {
                  useItem.options.name = `${STATIC_NAME}/media/[name].[contenthash:8].[ext]`
                }
              })
            }
            return oneOfRule;
          });
        }
        return rule
      })

      // copy其他静态资源到 static_name文件中
       onfig.plugins.push(
          new FileManagerPlugin({
            events: {
              onEnd: {
                move: [
                  { source: 'build/config.js', destination: `build/${STATIC_NAME}/config.js` },
                  ....
              ]
            }
          }
        })
       )
        
        // publicPath为 / 
        env === 'production' && (config.output.publicPath = '/')

        ...

        return config
      );
    }
  }
}

nginx 配置

location /xxxx {
    root $root/build;
    gzip_static on;
    try_files $uri $uri/ /index.html =404;
    proxy_set_header Access-Control-Allow-Origin *;
    add_header Cache-Control no-cache;
}
location /xxxx_static {
    alias $root/build/xxxx_static;
    gzip_static on;
    try_files $uri $uri/ /index.html =404;
    proxy_set_header Access-Control-Allow-Origin *;
    add_header Cache-Control no-cache;
}

这样我们就可以在 http://xxxxx/xxxx正常访问我们的项目了，如果需要修改 xxxx为abcd，我们只需要修改config.js中的baseName和nginx配置即可，即使部署多了，我们的 static 资源也不会重复；