Блог

У меня есть настройка с одним спа-салоном, которая идеально работала при работе с webpack4

После обновления до webpack 5 у меня появилось много таких ошибок:

Отказался применять стиль из ‘http://localhost:5000/assets/css/style.bundle.css» потому что его тип MIME («текст/html») не является поддерживаемым типом MIME таблицы стилей, и включена строгая проверка MIME.

Я часами искал в Google, но так и не смог решить эту проблему.

Мой конфигурационный файл webpack выглядит следующим образом:

 const path = require('path');
const { merge } = require('webpack-merge');
const singleSpaDefaults = require('webpack-config-single-spa');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = (webpackConfigEnv, argv) => {
  const orgName = 'ringana';
  const defaultConfig = singleSpaDefaults({
    orgName,
    projectName: 'root-config',
    webpackConfigEnv,
    argv,
    disableHtmlGeneration: true,
    // publicPath: '/',
  });

  return merge(defaultConfig, {
    // modify the webpack config however you'd like to by adding to this object
    plugins: [
      new HtmlWebpackPlugin({
        inject: false,
        template: 'src/index.ejs',
        templateParameters: {
          isLocal: webpackConfigEnv amp;amp; webpackConfigEnv.isLocal,
          orgName,
        },
      }),
    ],
    output: {
      filename: 'root-config.js',
      libraryTarget: 'system',
      path: path.resolve(__dirname, 'dist'),
      // publicPath: '/',
      clean: true,
    },
    module: {
      rules: [
        {
          test: /.css$/i,
          use: ['style-loader', 'css-loader'],
        },
        {
          test: /.(png|svg|jpg|jpeg|gif)$/i,
          type: 'asset/resource',
        },
        // {
        //   test: /.scss$/,
        //   loaders: ['style-loader', 'css-loader', 'sass-loader'],
        // },
      ],
    },
    devServer: {
      static: ['assets'],
      open: true,
      hot: true,
      headers: {
        'Access-Control-Allow-Origin': '*',
        // 'X-Content-Type-Options': 'nosniff',
      },
      allowedHosts: 'all',
      historyApiFallback: true,
      // client: {
      //   logging: 'info',
      //   progress: true,
      //   overlay: {
      //     errors: true,
      //     warnings: true,
      //   },
      // },
    },
  });
};