即使代码未更改，反应脚本构建也会生成新的哈希

Question

我在没有创建反应应用程序（没有弹出）的情况​​下构建反应应用程序。 如果代码没有改变（因为缓存问题），我想在每次构建时生成新的哈希值。 我安装了 react-app-rewired 以使用配置重载并将 package.json 更改为

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

在 config-overrides.js 中，我正在尝试为每个构建（缩小、css、js、样式化等）创建新的哈希，但不确定我是否以正确的方式进行

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 或不确定的东西。

我希望每个构建都为 js、css 和 html 文件生成新的唯一名称。

Answer 1

如果输入相同，如果你没有更改代码库中的任何内容，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，它都会创建一个不同的散列。工作证明：