Unable to load sp-loader for spfx 解决方案 with webpack

Question

我的打字稿文件包含以下导入：

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

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

npx webpack --config webpack.config.js

以下是一些错误：

ERROR in ./node_modules/@microsoft/sp-loader/lib/requirejs/RequireJsLoader.js Module not found: Error: Can't resolve './test/RequireJsMock' in '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/bootHeader.ts @ multi @babel/polyfill ./Classic/client/bootHeader.ts

ERROR in ./node_modules/@microsoft/sp-loader/lib/systemjs/SystemJsLoader.js Module not found: Error: Can't resolve './test/SystemJsMock' in 'C:\users\agaskell\source\repos\spfxBanner\node_modules@microsoft\sp-loader\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 来加载我的 bootstrap，而是在本地安装 bootstrap 模块，然后从我的自定义 sass 中引用它们。我的想法是 gulp with yeoman 通常会处理 SPComponentLoader 依赖项，但这次我使用的是自定义 webpack，我不想手动处理每个缺失的依赖项。

Unable to load sp-loader for spfx 解决方案 with webpack

Unable to load sp-loader for spfx solution with webpack

node.js

typescript

webpack

spfx