从 SCSS 文件中的 extract-text-webpack-plugin 切换到 mini-css-extract-plugin URL 后，未正确解析

问题描述

从 extract-text-webpack-plugin 移动到 mini-css-extract-plugin 后，我在 SCSS/CSS 文件中遇到了一些不再解决的 URL 问题。这些 URL 是 svg-sprites 并使用 svg-sprite-loader 生成。在一切正常之前。

Webpack 只是添加了原始 svg 文件所在的完整路径（“/User/...”）。我希望我从精灵中获取 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"),"../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,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
                                }
                            }
                        }
                    ],}
            ]
        },...
    };
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）