Блог

после перехода с extract-text-webpack-plugin на mini-css-extract-plugin у меня возникли некоторые проблемы с URL-адресами в файлах SCSS / CSS, которые больше не решаются. Эти URL-адреса создаются svg-sprites и генерируются с svg-sprite-loader помощью . До этого все работало нормально.

Webpack просто добавляет полный путь («/User/…»), в котором находится исходный файл svg. Я ожидал бы, что получу URL-адрес из спрайта с правильным хэшем в конце, например my-svg-sprite.svg#someid .

 const path = require('path');
const webpack = require('webpack');
const SpritePlugin = require('svg-sprite-loader/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const StylelintPlugin = require('stylelint-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const TerserPlugin = require('terser-webpack-plugin');

module.exports = function({manifestConfig, target, commonPlugins, mode}) {

    const plugins = [
        ...
        new SpritePlugin(),
        new MiniCssExtractPlugin({filename: `[name]${manifestConfig ? '-[contenthash]' : ''}.css`}),
        new StylelintPlugin({   "files": ["**/*.scss","!/shops/"],
            "context": path.resolve(__dirname, '../scss/'),
            "fix": true,
            "configFile": path.resolve(__dirname, '../scss/_stylelintrc')
        }),
        ...commonPlugins
    ];

    if (manifestConfig) {
        plugins.push(
                new WebpackManifestPlugin({
                    fileName: manifestConfig.output,
                    seed: manifestConfig.assets,
                    basePath: '/somepage/',
                    publicPath: '/somepage/',
                    map: (file) => {
                        file.name = file.name.replace(/(-[a-f0-9]{32})(..*)$/, '$2');
                        return file;
                    },
                })
        )
    }

    return {
        stats: 'minimal',
        devtool: 'source-map',
        entry: {
            myapp: [
                "babel-polyfill",
                path.resolve(__dirname, '../js/es6/myapp.es6.js')
            ]
        },
        output: {
            filename: `[name]${manifestConfig ? '-[chunkhash]' : ''}.js`, // use the properties of entry as name
            path: path.join(target, 'somepage'),
        },
        optimization: {
            minimizer: [
                new TerserPlugin({
                    parallel: true,
                    sourceMap: true,
                }),
                new CssMinimizerPlugin(),
            ]
        },
        module: {
            rules: [
                ...
                {
                    test: /.svg$/,
                    include: [
                        path.resolve(__dirname, "../img/flags"),
                        path.resolve(__dirname, "../img/myapp-icons")
                    ],
                    use: [
                        { loader: 'svg-sprite-loader',
                            options: {
                                extract: true,
                                spriteFilename: pathname => pathname.includes('myapp-icons') ?
                                        `images/other-sprite${manifestConfig ? '.[hash]' : ''}.svg` :
                                        `images/sprite${manifestConfig ? '.[hash]' : ''}.svg` },
                        }
                    ]
                },
                {
                    test: /.(png|jp(e*)g|svg|gif)$/,
                    exclude: [
                        path.resolve(__dirname, "../img/flags"),
                        path.resolve(__dirname, "../img/myapp-icons")
                    ],
                    use: [{
                        loader: 'url-loader',
                        options: {
                            limit: 300,
                            name: `images/[name]${manifestConfig ? '-[hash]' : ''}[ext]`
                        }
                    }]
                },
                ...
                {
                    test: /.scss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'postcss-loader',
                        {
                            loader: 'resolve-url-loader',
                            options: {
                                debug: true
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true,
                                sassOptions: {
                                    sourceMapContents: true
                                }
                            }
                        }
                    ],
                }
            ]
        },

        ...
    };
};