react打包如何加上版本号后缀

添加版本号后缀的方法

在React项目中，可以通过修改构建配置或使用环境变量来为打包文件添加版本号后缀。以下是几种常见方法：

通过package.json配置版本号

在package.json中定义版本号字段，然后在webpack配置中引用：

{
  "name": "my-app",
  "version": "1.0.0"
}

修改webpack配置

在webpack.config.js或craco.config.js（Create React App项目）中添加版本号后缀：

const packageJson = require('./package.json');

module.exports = {
  output: {
    filename: `[name].${packageJson.version}.js`,
    chunkFilename: `[name].${packageJson.version}.chunk.js`
  }
}

使用环境变量

创建.env文件定义版本号变量：

REACT_APP_VERSION=1.0.0

然后在webpack配置中使用：

module.exports = {
  output: {
    filename: `[name].${process.env.REACT_APP_VERSION}.js`
  }
}

使用hash替代版本号

如果希望每次构建生成唯一文件名，可以使用contenthash：

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js'
  }
}

Create React App项目的配置

对于使用Create React App创建的项目，可以通过craco或react-app-rewired自定义配置：

1. 安装craco：

   npm install @craco/craco

2. 创建craco.config.js：

const packageJson = require('./package.json');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.output.filename = `static/js/[name].${packageJson.version}.js`;
      webpackConfig.output.chunkFilename = `static/js/[name].${packageJson.version}.chunk.js`;
      return webpackConfig;
    }
  }
}

自动化版本号更新

可以使用npm version命令自动更新版本号：

npm version patch # 1.0.0 → 1.0.1
npm version minor # 1.0.1 → 1.1.0
npm version major # 1.1.0 → 2.0.0

注意事项

• 确保版本号符合语义化版本规范
• 版本号变更可能导致浏览器缓存失效
• 生产环境和开发环境可能需要不同的文件名策略
• 如果使用CDN，需要同步更新文件引用路径