single-spa环境升级Webpack5后样式因MIME类型为text/html被拒绝加载如何解决

问题原因 #

你看到的MIME类型错误本质是服务端找不到对应CSS资源，触发historyApiFallback返回了index.html页面，所以浏览器拿到的是text/html类型的内容，无法识别为样式文件。针对你的配置，可按以下步骤逐一修复：

修复步骤 #

1. 开启publicPath配置
   Webpack5对公共路径的校验比Webpack4严格，你注释掉的两处publicPath需要解除注释，本地开发设置为'/'即可，线上部署时改为对应的实际部署前缀：

// singleSpaDefaults 配置内
publicPath: '/',
// output 配置内也保持一致
publicPath: '/',

2. 修正devServer静态资源目录配置
   你当前static: ['assets']只指定了本地assets目录作为静态资源根目录，webpack构建产物输出在dist目录中，devServer找不到dist下的资源，需要补全路径：

devServer: {
  // 同时识别dist构建产物和本地assets静态资源
  static: [path.join(__dirname, 'dist'), path.join(__dirname, 'assets')],
  // 其余原有配置保持不变
}

3. 调整historyApiFallback规则，禁止静态资源回退
   当前配置会把所有找不到的请求都 fallback 到index.html，需要添加规则过滤静态资源后缀的请求：

historyApiFallback: {
  rewrites: [
    // 带静态资源后缀的请求不触发回退，直接返回404方便排查
    { from: /\.(css|js|png|jpg|jpeg|svg|gif)$/, to: (context) => context.parsedUrl.pathname }
  ]
}

4. 检查CSS打包逻辑（如果你需要单独输出CSS文件则必须修改）
   你当前配置使用style-loader，会把CSS内容直接注入到页面的style标签中，不会生成单独的CSS文件，如果你确实需要单独打包出style.bundle.css，需要替换loader：

• 先安装mini-css-extract-plugin
• 修改CSS处理规则：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// module.rules内替换css处理规则
{
  test: /\.css$/i,
  use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
// plugins数组内添加插件实例
new MiniCssExtractPlugin({
  filename: 'assets/css/[name].bundle.css'
})

修改完成后重启devServer即可解决问题。

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