Как исправить ошибку MiniCssExtractPlugin.loader?

Question

[oelena]

Подскажите, как решить данную проблему. Стала появляться после установки MiniCssExtractPlugin (до установки все работало). Webpack только изучаю. В доке и на просторах интернета не нашла как разрешить эту ошибку.
Пакетные версии:

const path = require(`path`);
const HTMLWebpackPlugin = require(`html-webpack-plugin`);
const {CleanWebpackPlugin} = require(`clean-webpack-plugin`);
const CopyWebpackPlugin = require(`copy-webpack-plugin`);
const MiniCssExtractPlugin = require(`mini-css-extract-plugin`);
module.exports = {
    context: path.resolve(__dirname, `src`),
    mode: `development`,
    entry: {
        main: `./js/index.js`,
    },
    output: {
        filename: `[name].[contenthash].js`,
        path:path.resolve(__dirname, `dist`),
    },
    devServer: {
        port: 4200,
        overlay: true,
        open: true
    },
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: `./index.html`
        }),
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin([
        // {
        //     from: ``;
        //     to: ``;
        // }
        ]),
        new MiniCssExtractPlugin({
            filename: `[name].[contenthash].css`,
        }),

    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                }, `css-loader`]
            },
            {
                test: /\.(png|jpg|svg|gif)$/,
                use: [`file-loader`]
            },
            {
                test: /\.(ttf|woff|woff2|eot)$/,
                use: [`file-loader`]
            }
        ],
    },
}

Comments

[Дмитрий Беляев]

Попробуйте прописать publicPath в output
https://webpack.js.org/configuration/output/#outpu...

Если не поможет, то покажите styles/styles.css

[oelena]

Благодарю, это помогло и первая ошибка ушла. Не подскажите, с чем может быть связан ERROR in Cannot read property 'map' of undefined?

[oelena]

Дмитрий Беляев, Спасибо за помощь. С map разобралась.

Answer 1

[allbidder]

Для "development" сборки

{
        test: /\.((c|sa|sc)ss)$/i,
        use: [
          'style-loader',
          {loader: 'css-loader', options: {sourceMap: true, importLoaders: 1, modules: {
            localIdentName: '[name]__[local]--[hash:base64:5]',
          }}},
          {loader: 'postcss-loader', options: {sourceMap: true}},
          {loader: 'sass-loader', options: {sourceMap: true}},
        ],
      },

для "production" 'style-loader' заменить на MiniCssExtractPlugin.loader и sourceMap: false