reactjs react脚本构建生成新散列，即使代码未更改

wqnecbli 于 2023-01-17 发布在 React

关注(0)|答案(1)|浏览(127)

我构建了react应用程序，但没有create-react-app（没有弹出）。如果代码没有更改（因为缓存问题），我希望每次构建都生成新的哈希。我安装了react-app-rewired以使用配置重载，并将package.json更改为

"build": "react-app-rewired build",

在config-overrides.js中，我尝试为每个构建版本（minified、css、js、styled等）创建新散列，但不确定是否以正确的方式进行

require('dotenv').config();
var uniqid = require('uniqid');
const FileManagerPlugin = require('filemanager-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  webpack: function (config, env) {
    console.log('outputconfig before', config.output);
    const buildHash = uniqid();
    config.output.filename = `static/js/[name].${buildHash}.js`;
    config.output.chunkFilename = `static/js/[name].${buildHash}.chunk.js`;
    console.log('outputs config', config.output);
    return config;
  },
};

当我将其部署到生产环境时，如果代码没有更改，哈希构建看起来是相同的。不确定我是否正确配置了config-overloads.js，可能我需要添加webpack或其他不确定的内容。x1c 0d1x
我希望每一个构建生成新的唯一名称的js，css和html文件。

reactjs

来源：https://stackoverflow.com/questions/73601261/react-scripts-build-generate-new-hash-even-if-the-code-not-changes

1条答案

按热度按时间

fcg9iug31#

如果输入是相同的，如果你没有改变任何代码库，webpack将总是产生相同的哈希值。这是hash function的主要属性。所以你必须设法总是改变代码库。为了实现这一点，你可以写一个js文件，并将其导入app.js，这样webpack将看到该文件的输入已经改变。在你的webpack.config.js

const crypto = require("crypto");
const fs = require("fs");

const content = crypto.randomBytes(8).toString("hex");
const value = JSON.stringify(content);
// we have to write a valid javascript
fs.writeFile("src/test.js", `export const a=${value}`, (err) => {
  if (err) {
    console.error(err);
  }
});

此test.js对您的代码没有影响。因此您可以安全地导入app.js

import "./test.js";

如果你不导入它将不工作。因为webpack将只读导入的代码。
在webpack.config.js中，我将文件名定义为

output: {
    filename: "[name].[hash].js",
    path: path.join(__dirname, "dist"),
    publicPath: "/",
  },

每次运行npm run build时，它都会创建一个不同的哈希值。

赞(0）回复(0）举报 2023-01-17

我来回答

reactjs react脚本构建生成新散列，即使代码未更改

1条答案

相关问题

热门标签

最新问答