无法从 Webpack 访问函数“emitFile”

Question

我正在尝试使用 Webpack5 中的函数，即“emitFile”和“rootContext”。但是我无法访问它们，并返回以下消息“未解析的函数或方法”。我显然已经导入了所需的包：

const 路径 = require("路径"); const loaderUtils = require("loader-utils");

但是还是不行...

这是我尝试从 Webpack5 访问“emitFile”和“rootContext”的 .js 文件。然而 这些函数被标记为“未解析的函数或方法emitFile()”

function TranslationsLoader(content) {
    this.cacheable && this.cacheable();

    var options = loaderUtils.getOptions(this);

    var name = options.name || "../translations/[name].json";
    var runtimePath = options.runtime || require.resolve("handlebars/runtime");

    var translationsInput = JSON.parse(content);
    [tag:var translationsPath = path.relative(this.rootContext || this.options.context, this.resourcePath);]
    var marketplaceTranslations = extractMarketplaceTranslation(
        translationsInput,
        translationsPath
    );

    var url = loaderUtils.interpolateName(this, name, {
        content: marketplaceTranslations
    });
   [tag: this.emitFile(url, marketplaceTranslations);]

    var compiledTranslations = compileTranslations(translationsInput);
    return `
    var Handlebars = require(${JSON.stringify(runtimePath)});
    module.exports = ${compiledTranslations};
  `;
}

module.exports = TranslationsLoader;

这是 Webpack.config 希望它有所帮助。有问题的加载器是“translations-loader”。

module.exports = {
  entry: {
    app: [
      "./src/javascripts/index.js",
      "./src/stylesheets/app.scss"
    ],
    modal: [
      "./src/javascripts/modal.js",
      "./src/stylesheets/app.scss"
    ]
  },
  output: {
    path: path.resolve(__dirname, "./dist/assets"),
    filename: "[name].js",
    sourceMapFilename: "[file].map"
  },
  module: {
    rules: [
      {
        test: /\.json$/,
        include: path.resolve(__dirname, "./src/translations"),
        loader: "translations-loader",
        options: {
          runtime: "handlebars",
        },
      },
      {
        test: /\.(handlebars|hd?bs)$/,
        loader: "handlebars-loader",
        options: {
          extensions: ["handlebars", "hdbs", "hbs"],
          runtime: "handlebars",
          inlineRequires: "/images/"
        }
      }
    ]
  },
  resolveLoader: {
    modules: ["node_modules", path.resolve(__dirname, "./lib/loaders")]
  },
  resolve: {
    modules: ["node_modules", path.resolve(__dirname, "./lib/javascripts")],
    alias: {
      app_manifest: path.resolve(__dirname, "./dist/manifest.json")
    }
  }
};

我希望能够在 Webpack 上下文中使用此功能。

Answer 1

要在自定义加载器中从Webpack访问emitFile和rootContext，您需要确保加载器已使用Webpack的loader-utils正确初始化并且具有可用的Webpack上下文。以下是您可以修改 TranslationsLoader 以访问这些功能的方法：

const path = require('path');
const loaderUtils = require('loader-utils');

function TranslationsLoader(content) {
    const options = loaderUtils.getOptions(this);

    const name = options.name || "../translations/[name].json";
    const runtimePath = options.runtime || require.resolve("handlebars/runtime");

    const translationsInput = JSON.parse(content);
    const translationsPath = path.relative(this.rootContext || this.options.context, this.resourcePath);
    const marketplaceTranslations = extractMarketplaceTranslation(
        translationsInput,
        translationsPath
    );

    const url = loaderUtils.interpolateName(this, name, {
        content: marketplaceTranslations
    });

    // Ensure emitFile is available by checking if it's defined
    if (this.emitFile) {
        this.emitFile(url, marketplaceTranslations);
    }

    const compiledTranslations = compileTranslations(translationsInput);
    return `
    var Handlebars = require(${JSON.stringify(runtimePath)});
    module.exports = ${compiledTranslations};
  `;
}

module.exports = TranslationsLoader;

以下是我所做的更改：

添加了 const path = require('path');在开始导入路径模块。 修改了translationsPath的定义方式。 在调用 this.emitFile 之前检查是否已定义，以防止出现“未解析的函数或方法 emitFile()”错误。 您的 Webpack 配置似乎是正确的，因此您不需要在那里进行任何更改。

确保您的 TranslationsLoader 文件位于 Webpack 配置的resolveLoader 配置中指定的正确目录中：

resolveLoader: {
    modules: ["node_modules", path.resolve(__dirname, "./lib/loaders")]
},

通过这些更改，您应该能够在自定义加载器中从 Webpack 访问 emmitFile 和 rootContext，而不会出现任何问题。