如何在每次构建时修改chunk.css文件名且避免重复文件？

要实现只生成带唯一名称的CSS chunk文件，你需要修改mini-css-extract-plugin的配置（CSS文件的命名由这个插件控制，而非webpack的output配置），同时确保覆盖原有配置而非新增，这样就能避免重复文件。

修改后的customize-cra配置代码如下：

const { override } = require('customize-cra');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const date = new Date();
const unicName = date.getDay().toString() + date.getHours().toString() + date.getMinutes().toString() + date.getMilliseconds().toString();

const modifyChunkNames = (config, env) => {
    // 修改JS文件的命名规则，保留原有output的其他配置
    config.output = {
        ...config.output,
        filename: `[name].${unicName}.js`,
        path: path.resolve(__dirname, "build"),
        publicPath: '/',
        chunkFilename: `static/js/[name].${unicName}.chunk.js`,
    };

    // 修改CSS文件的命名规则，覆盖mini-css-extract-plugin的原有配置
    config.plugins.forEach(plugin => {
        if (plugin.constructor.name === 'MiniCssExtractPlugin') {
            plugin.options.filename = `static/css/[name].${unicName}.css`;
            plugin.options.chunkFilename = `static/css/[name].${unicName}.chunk.css`;
        }
    });

    return config;
};

module.exports = {
    webpack: override(modifyChunkNames),
};

关键说明： #

• 保留原有配置：修改config.output时用...config.output展开原有配置，避免覆盖webpack默认的其他必要参数
• 定位CSS插件：通过遍历config.plugins找到MiniCssExtractPlugin实例，直接修改它的命名规则参数，替换为带唯一标识的格式
• 避免重复文件：这种方式是直接修改原有插件的配置，而非新增插件实例，因此不会生成新旧两种命名的文件

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