调试NX+Webpack配置：CSS文件去哈希值设置无效问题

在Nx环境下直接修改cssFilename不生效，核心原因是Nx通过withNx、withReact插件生成的默认Webpack配置会覆盖自定义设置，以下是具体的调试和解决步骤：

1. 确认Webpack配置的合并逻辑 #

Nx使用composePlugins组合配置，自定义配置必须放在最后一个参数的回调里，确保能覆盖插件生成的默认配置：

const { composePlugins, withNx, withReact } = require('@nrwl/webpack');

module.exports = composePlugins(withNx(), withReact(), (config) => {
  // 在此处修改配置，才会覆盖默认值
  return config;
});

2. 打印最终生效的Webpack配置 #

要确定你的cssFilename是否被覆盖，直接打印最终配置是最有效的调试方式：

• 在webpack.config.js的回调里添加console.log(config.plugins)，找到MiniCssExtractPlugin实例，查看它的filename属性。
• 或者使用Nx提供的配置检查命令：

  npx nx run <你的项目名>:build --webpackConfigInspect
  

  该命令会输出完整的最终Webpack配置，你可以搜索MiniCssExtractPlugin来定位具体的文件名设置。

3. 直接修改MiniCssExtractPlugin配置 #

CSS文件名是由MiniCssExtractPlugin控制的，而非css-loader的cssFilename选项，需要直接修改该插件的配置：

const { composePlugins, withNx, withReact } = require('@nrwl/webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = composePlugins(withNx(), withReact(), (config) => {
  // 找到已有的MiniCssExtractPlugin实例并替换
  const cssPluginIdx = config.plugins.findIndex(p => p instanceof MiniCssExtractPlugin);
  if (cssPluginIdx !== -1) {
    config.plugins[cssPluginIdx] = new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[name].chunk.css' // 若有CSS chunk也需要移除哈希，一并修改
    });
  }
  return config;
});

4. 检查Nx项目配置是否有冲突 #

打开项目根目录下的project.json，查看targets.build.options中的outputHashing设置：

• 如果设置为all或css，会强制给CSS文件添加哈希，需要改成none（若允许所有文件都无哈希），或者保留outputHashing但通过上述Webpack配置单独覆盖CSS文件名。

5. 清理Nx构建缓存 #

Nx会缓存构建结果，修改配置后必须执行：

npx nx reset

再重新执行构建，确保新配置生效。

内容的提问来源于stack exchange，提问作者S. C.