如何在CRA中通过覆写Webpack配置修改CSS bundle的名称

你可以通过修改mini-css-extract-plugin的配置实现CSS bundle的命名规则调整，Create React App生产环境默认用该插件处理CSS文件的抽离输出，完整修改后的config-overrides.js如下：

module.exports = function override(config, webpackEnv) {
  const isEnvDevelopment = webpackEnv === 'development';
  const isEnvProduction = webpackEnv === 'production';

  // 原有JS文件名配置
  config.output.filename = isEnvProduction
    ? 'static/js/[name].js?nocache=[contenthash:8]'
    : isEnvDevelopment && 'static/js/bundle.js';
  config.output.chunkFilename = isEnvProduction
    ? 'static/js/[name].chunk.js?nocache=[contenthash:8]'
    : isEnvDevelopment && 'static/js/[name].chunk.js';

  // 新增CSS文件名配置
  if (isEnvProduction) {
    const miniCssExtractPlugin = config.plugins.find(
      plugin => plugin.constructor.name === 'MiniCssExtractPlugin'
    );
    if (miniCssExtractPlugin) {
      miniCssExtractPlugin.options.filename = 'static/css/[name].css?nocache=[contenthash:8]';
      miniCssExtractPlugin.options.chunkFilename = 'static/css/[name].chunk.css?nocache=[contenthash:8]';
    }
  }

  return config
}

• 开发环境下CRA默认用style-loader把CSS直接注入到页面的<style>标签中，不会生成单独的CSS文件，所以不需要配置开发环境的CSS命名规则
• 如果你自行修改过配置，开发环境也需要输出单独CSS文件，只需要参照JS的配置逻辑，给filename和chunkFilename加上开发环境的分支判断即可

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