这是我尝试从 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 上下文中使用此功能。
要在自定义加载器中从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,而不会出现任何问题。