问SPFx Webpack错误“规则只能有一个资源来源……”

EN

Error - 'webpack' sub task errored after 131 ms Rule can only have one resource source (provided resource and test + include + exclude) in {
    "enforce": "pre",
    "use": "C:\\workspace\\spfx14\\node_modules\\source-map-loader",
    "exclude": [
        {}
    ]
}

{
    "name": "vue-js-no-framework-spfx-14",
    "version": "0.0.1",
    "private": true,
    "main": "lib/index.js",
    "scripts": {
        "build": "gulp bundle",
        "clean": "gulp clean",
        "test": "gulp test"
    },
    "dependencies": {
        "@microsoft/sp-core-library": "1.14.0",
        "@microsoft/sp-lodash-subset": "1.14.0",
        "@microsoft/sp-office-ui-fabric-core": "1.14.0",
        "@microsoft/sp-property-pane": "1.14.0",
        "@microsoft/sp-webpart-base": "1.14.0",
        "ajv": "^8.11.0",
        "node-sass": "^4.14.1",
        "vue": "^2.6.12",
        "vue-class-component": "^7.2.6",
        "vue-property-decorator": "^9.1.2",
        "vue-style-loader": "^4.1.3"
    },
    "devDependencies": {
        "@microsoft/rush-stack-compiler-3.9": "0.4.47",
        "@microsoft/sp-build-web": "1.14.0",
        "@microsoft/sp-module-interfaces": "1.14.0",
        "@microsoft/sp-tslint-rules": "1.14.0",
        "@types/webpack-env": "1.13.1",
        "css-loader": "^6.7.1",
        "gulp": "~4.0.2",
        "gulp-sequence": "^1.0.0",
        "sass": "^1.52.3",
        "sass-loader": "^13.0.0",
        "ts-loader": "^9.3.0",
        "vue-loader": "^15.9.8",
        "vue-loader-plugin": "^1.3.0",
        "vue-template-compiler": "^2.6.14",
        "webpack": "^5.73.0",
        "webpack-bundle-analyzer": "^4.5.0"
    }
}

'use strict';

// check if gulp dist was called
if (process.argv.indexOf('dist') !== -1) {
    // add ship options to command call
    process.argv.push('--ship');
}

const path = require('path');
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
const gulpSequence = require('gulp-sequence');

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
    var result = getTasks.call(build.rig);

    result.set('serve', result.get('serve-deprecated'));

    return result;
};

// Create clean distrubution package
gulp.task('dist', gulpSequence('clean', 'bundle', 'package-solution'));
// Create clean development package
gulp.task('dev', gulpSequence('clean', 'bundle', 'package-solution'));



/**
 * Webpack Bundle Anlayzer
 * Reference and gulp task
 */
if (process.argv.indexOf('--analyze') !== -1 ||
    process.argv.indexOf('dist') !== -1 ||
    process.argv.indexOf('dev') !== -1) {

    const bundleAnalyzer = require('webpack-bundle-analyzer');

    build.configureWebpack.mergeConfig({

        additionalConfiguration: (generatedConfiguration) => {
            const lastDirName = path.basename(__dirname);
            const dropPath = path.join(__dirname, 'temp', 'stats');
            generatedConfiguration.plugins.push(new bundleAnalyzer.BundleAnalyzerPlugin({
                openAnalyzer: false,
                analyzerMode: 'static',
                reportFilename: path.join(dropPath, `${lastDirName}.stats.html`),
                generateStatsFile: true,
                statsFilename: path.join(dropPath, `${lastDirName}.stats.json`),
                logLevel: 'error'
            }));

            return generatedConfiguration;
        }

    });
}

const VueLoaderPlugin = require('vue-loader-plugin');
const vuePlugin = new VueLoaderPlugin();
const themedStyleLoader = require.resolve('@microsoft/loader-load-themed-styles');

build.sass.setConfig({
    sassMatch: []
});


build.configureWebpack.mergeConfig({
    additionalConfiguration: (generatedConfiguration) => {
        generatedConfiguration.resolve.alias = {
            'vue$': 'vue/dist/vue.esm.js'
        };

        generatedConfiguration.module.rules.unshift({
            test: /\.vue$/,
            use: [
                {
                    loader: 'vue-loader',
                    options: {
                        esModule: true
                    }
                }
            ]
        });

        const loadersConfigs = [
        {
            resourceQuery: /vue&type=script&lang=ts/, // typescript
            loader: 'ts-loader',
            options: {
                appendTsSuffixTo: [/\.vue$/]
            }
        },
        {
            resourceQuery: /vue&type=style.*&lang=scss/, // scss
            use: [
            {
                loader: themedStyleLoader,
                options: {
                    async: true
                }
            },
            {
                loader: 'css-loader',
                options: {
                    modules: true,
                    localIdentName: '[local]_[sha1:hash:hex:8]'
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    implementation: require("sass"),
                }
            },
            ]
        }];
        generatedConfiguration.plugins.push(vuePlugin);
    
        generatedConfiguration.module.rules.push(...loadersConfigs);

        return generatedConfiguration;
    }
})


build.copyStaticAssets.setConfig({
    includeExtensions: ['vue', 'scss']
    // includeExtensions: ['vue']
});

let copyOtherFiles = build.subTask('copy-other-files', function (gulp, buildOptions, done) {
    return gulp.src(['src/**/*.vue', 'src/**/*.scss']).pipe(gulp.dest(buildOptions.libFolder))
});

build.task('copy-other-files', copyOtherFiles);
build.rig.addPostTypescriptTask(copyOtherFiles);



build.initialize(gulp);

    const checkResourceSource = newSource => {
    if (resourceSource && resourceSource !== newSource) {
        throw new Error(
            RuleSet.buildErrorMessage(
                rule,
                new Error(
                    "Rule can only have one resource source (provided " +
                        newSource +
                        " and " +
                        resourceSource +
                        ")"
                )
            )
        );
    }
    resourceSource = newSource;
};
if (rule.test || rule.include || rule.exclude) {
    checkResourceSource("test + include + exclude");
    condition = {
        test: rule.test,
        include: rule.include,
        exclude: rule.exclude
    };
    try {
        newRule.resource = RuleSet.normalizeCondition(condition);
    } catch (error) {
        throw new Error(RuleSet.buildErrorMessage(condition, error));
    }
}
if (rule.resource) {
    checkResourceSource("resource");
    try {
        newRule.resource = RuleSet.normalizeCondition(rule.resource);
    } catch (error) {
        throw new Error(RuleSet.buildErrorMessage(rule.resource, error));
    }
}