Node.js 无法为带有Web包的spfx解决方案加载sp加载程序

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

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

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

npxwebpack--config webpack.config.js

以下是一些错误：

错误 ./node_modules/@microsoft/sp loader/lib/requirejs/RequireJsLoader.js 未找到模块：错误：无法解析中的“./test/RequireJsMock” 'C:\users\agaskell\source\repos\spfxBanner\node_modules@microsoft\sp loader\lib\requirejs' @./node_modules/@microsoft/sp loader/lib/requirejs/RequireJsLoader.js 258:14-45 @ ./node_modules/@microsoft/sp loader/lib/requirejs/SPRequireJsComponentLoader.js @./node_modules/@microsoft/sp loader/lib/starter/SPStarter.js@ ./node_modules/@microsoft/sp loader/lib/index.js@ ./Classic/client/boothheader.ts@multi@babel/polyfill ./Classic/client/boothheader.ts

错误 ./node_modules/@microsoft/sp loader/lib/systemjs/SystemJsLoader.js 未找到模块：错误：无法解析中的“./test/SystemJsMock” 'C:\users\agaskell\source\repos\spfxBanner\node_modules@microsoft\sp loader\lib\systemjs'

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

有人能帮忙吗

以下是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"
  }
};

const path=require（“路径”）；
const MiniCssExtractPlugin=require（'mini-css-extract-plugin'）；
module.exports={
模式：“发展”，
条目：['@babel/polyfill'，
解析（_dirname，'./Classic/client/boothheader.ts'），
模块：{
规则：[
{
测试：/\.tsx？$/,，
使用：“ts加载器”，
排除：/node\u模块/
},
{
测试：/\（s*）css$/，
使用：[
//回退到开发中的样式加载器
process.env.NODE_env！=“生产”
？“样式加载器”
：MiniCssExtractPlugin.loader，
“css加载器”，
“sass加载程序”
]
},
{
测试：/\（png | jp（e*）g | svg）$/，
使用：[
{
加载器：“url加载器”，
选项：{
限制：15000，//将小于8kb的图像转换为base64字符串
名称：“图像/[hash]-[name]。[ext]”
}
}
]
}
]
},
插件：[
新的MinicsSextract插件({
文件名：“[name].css”，
chunkFilename:“[id].css”
})
],
决心：{
扩展名：[“.tsx”、“.ts”、“.js”]
},
输出：{
文件名：“classicBundleAG.js”，
path:path.resolve（_dirname，“Classic”），
图书馆目标：“umd”
}
};

我最终为此使用了一种解决方法。我放弃了SPComponentLoader来加载我的引导，而是在本地安装引导模块，然后从自定义sass引用它们。

---

我的想法是gulp with yeoman通常会处理SPComponentLoader依赖项，但这次我使用的是自定义网页，我不想手动处理每个缺少的依赖项。

我最终为此使用了一种解决方法。我放弃了SPComponentLoader来加载我的引导，而是在本地安装引导模块，然后从自定义sass引用它们。 我的想法是gulp with yeoman通常处理SPComponentLoader依赖项，但这次我使用的是一个自定义网页包，我不想手动处理每个缺少的依赖项