无法使用webpack为spfx解决方案加载sp加载程序

Question

我的typescript文件包括以下导入：

import { SPComponentLoader } from '@microsoft/sp-loader';

但我在使用webpack 构建时遇到了很多错误

npx webpack --config webpack.config.js

以下是一些错误：

中的错误./node_modules/@microsoft/sp loader/lib/requirejs/RequireJsLoader.js找不到模块：错误：无法解析"/test/RequireJsMock'in'C:\users\agaskell\source\repos\spfxBanner\node_modules@microsoft\sp加载程序\lib\requirejs@/node_modules/@microsoft/sp-loader/lib/requirejs/RequireJsLoader.js258:14-45@./node_modules/@microsoft/sp-loader/lib/requireJsComponentLoader.js@/node_modules/@microsoft/sp-loader/lib/starter/SPStarter.js@./node_modules/@microsoft/sp-loader/lib/index.js@./Classic/client/bootHeader.ts@multi@babel/polyfill./Classic/client/bootHeader.ts

中的错误./node_modules/@microsoft/sp loader/lib/systemjs/SystemJsLoader.js找不到模块：错误：无法解析"/test/SystemJsMock'in'C:\users\agaskell\source\repos\spfxBanner\node_modules@microsoft\sp加载器\lib\systemjs的

我正试图将我的ts文件构建到经典SharePoint网站的js中，我通常对现代页面使用gulp，但对经典网站，我使用单独的bootloader.ts文件和webpack。

有人能帮忙吗？

这是webpack.config.js文件：

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: "development",
entry: ['@babel/polyfill',
path.resolve(__dirname, './Classic/client/bootHeader.ts')],
module: {
rules: [
{
test: /.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
},
{
test: /.(s*)css$/,
use: [
// fallback to style-loader in development
process.env.NODE_ENV !== "production"
? "style-loader"
: MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
},
{
test: /.(png|jp(e*)g|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 15000, // Convert images < 8kb to base64 strings
name: "images/[hash]-[name].[ext]"
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
output: {
filename: "classicBundleAG.js",
path: path.resolve(__dirname, "Classic"),
libraryTarget: "umd"
}
};

Answer 1

我最终使用了一个解决方法。我放弃了使用SPComponentLoader来加载引导程序，而是在本地安装引导程序模块，然后从我的自定义sass中引用它们。我的想法是，yeoman通常处理SPComponentLoader依赖项，但这次我使用的是自定义的webpack，我不想手动处理每一个丢失的依赖项。