Подключение файлов стилей Webpack

Question

Всем здравствуйте. Впервые работаю с вебпаком, пытаюсь собрать простой проект, возникла проблема с подключением стилей, они применились, в терминале ошибок нет, тем не менее в браузе следующая ошибка:

Refused to apply style from 'http://localhost:8080/css/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

То же самое с файлом fonts.css, но шрифты и вовсе не применились.

Спасибо.

Answer 1

const path = require("path");
const webpack = require("webpack");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const CopyWebPackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: { index: path.resolve(__dirname, "src", "index.js") },

  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/",
    filename: "[name].js",
    chunkFilename: "[id].[chunkhash].js",
  },

  plugins: [
    new HTMLWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
      filename: "index.html",
      inject: "body",
    }),

    new CopyWebPackPlugin({
      patterns: [{ from: path.resolve(__dirname, "src", "img"), to: "img" }],
    }),

    new MiniCssExtractPlugin(),

    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    // new webpack.ContextReplacementPlugin(path.resolve(__dirname, "src")),
  ],

  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },

      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/i,
        // use: [{ loader: "raw-loader" }, { loader: "file-loader" }],
        use: [{ loader: "file-loader" }],
      },


      {
        test: /\.html$/i,
        use: [{ loader: "html-loader" }],
        exclude: [path.resolve(__dirname, "src", "index.html")],
      },
    ],
  },

  optimization: {
    splitChunks: { chunks: "all" },
  },
};

БЛОГ НА HUSL

Подключение файлов стилей Webpack

Ответы (1 шт):