【发布时间】：2022-10-05 07:29:20
【问题描述】：
我正在尝试创建一个 Vue 单页组件。 我使用 Node 14.19.1 和 SPFx 1.14，并使用 Yeoman 创建项目。 当我在本地部署项目时，我得到下一个错误
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": [
{}
]
}
这是我的 package.json
{
"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"
}
}
这里是我的 gulp.js
'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);
然后我在 RuleSet 中得到错误
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));
}
}
我该如何解决这个问题？
提前致谢
【问题讨论】：
标签： vue.js webpack spfx webpack-5