val-loader
webpack 加载器，它执行给定的模块，并在构建时返回执行结果，当该模块在包中需要时。通过这种方式，加载器将模块从代码更改为结果。
查看 val-loader 的另一种方式是，它允许用户使用自己的自定义加载器逻辑，而无需编写自定义加载器。
目标模块使用两个参数调用：(options, loaderContext)
开始
首先，您需要安装 val-loader
npm install val-loader --save-dev
yarn add -D val-loader
pnpm add -D val-loader
然后将加载器添加到您的 webpack 配置中。例如
target-file.js
module.exports = (options, loaderContext) => {
return { code: "module.exports = 42;" };
};webpack.config.js
module.exports = {
module: {
rules: [
{
test: /target-file.js$/,
use: [
{
loader: `val-loader`,
},
],
},
],
},
};src/entry.js
const answer = require("target-file");通过您喜欢的方法运行 webpack。
选项
executableFile
类型
type executableFile = string;默认值：undefined
允许指定可执行文件的路径
data.json
{
"years": "10"
}executable-file.js
module.exports = function yearsInMs(options, loaderContext, content) {
const { years } = JSON.parse(content);
const value = years * 365 * 24 * 60 * 60 * 1000;
return {
cacheable: true,
code: "module.exports = " + value,
};
};webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(json)$/i,
rules: [
{
loader: "val-loader",
options: {
executableFile: path.resolve(
__dirname,
"fixtures",
"executableFile.js",
),
},
},
],
},
{
test: /\.json$/i,
type: "asset/resource",
},
],
},
};返回对象属性
此加载器的目标模块必须导出一个返回对象的 Function，或一个解析对象的 Promise（例如异步函数），至少包含一个 code 属性，但可以包含任意数量的其他属性。
code
类型
type code = string | Buffer;默认值：undefined 必需
传递给 webpack 或将替换模块的下一个加载器的代码。
sourceMap
类型
type sourceMap = object;默认值：undefined
传递给 webpack 或下一个加载器的源映射。
ast
类型
type ast = Array<object>;默认值：undefined
将传递给下一个加载器的 抽象语法树。如果下一个加载器使用相同的 AST，则有助于加快构建时间。
dependencies
类型
type dependencies = Array<string>;默认值：[]
文件依赖项的绝对原生路径数组，webpack 应监视其更改。
还可以使用 loaderContext.addDependency(file: string) 添加依赖项。
contextDependencies
类型
type contextDependencies = Array<string>;默认值：[]
目录依赖项的绝对原生路径数组，webpack 应监视其更改。
还可以使用 loaderContext.addContextDependency(directory: string) 添加上下文依赖项。
buildDependencies
类型
type buildDependencies = Array<string>;默认值：[]
目录依赖项的绝对原生路径数组，webpack 应监视其更改。
还可以使用 loaderContext.addBuildDependency(file: string) 添加构建依赖项。
cacheable
类型
type cacheable = boolean;默认值：false
如果为 true，则指定如果 dependencies 中没有任何项发生更改，则可以在监视模式下重新使用代码。
示例
简单
在此示例中，加载器配置为在 years-in-ms.js 文件名上运行，执行代码，并将结果作为执行结果存储在包中。此示例将 years 作为 option 传递，该 option 对应于目标模块导出函数中的 years 参数
years-in-ms.js
module.exports = function yearsInMs({ years }) {
const value = years * 365 * 24 * 60 * 60 * 1000;
// NOTE: this return value will replace the module in the bundle
return {
cacheable: true,
code: "module.exports = " + value,
};
};webpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("src/years-in-ms.js"),
use: [
{
loader: "val-loader",
options: {
years: 10,
},
},
],
},
],
},
};在包中，需要该模块时返回
import tenYearsMs from "years-in-ms";
console.log(tenYearsMs); // 315360000000Modernizr
此示例展示了如何构建 modernizr。
entry.js
import modenizr from "./modernizr.js";modernizr.js
const modernizr = require("modernizr");
module.exports = function (options) {
return new Promise(function (resolve) {
// It is impossible to throw an error because modernizr causes the process.exit(1)
modernizr.build(options, function (output) {
resolve({
cacheable: true,
code: `var modernizr; var hadGlobal = 'Modernizr' in window; var oldGlobal = window.Modernizr; ${output} modernizr = window.Modernizr; if (hadGlobal) { window.Modernizr = oldGlobal; } else { delete window.Modernizr; } export default modernizr;`,
});
});
});
};webpack.config.js
const path = require("path");
module.exports = {
module: {
rules: [
{
test: path.resolve(__dirname, "src", "modernizr.js"),
use: [
{
loader: "val-loader",
options: {
minify: false,
options: ["setClasses"],
"feature-detects": [
"test/css/flexbox",
"test/es6/promises",
"test/serviceworker",
],
},
},
],
},
],
},
};Figlet
此示例展示了如何构建 figlet。
entry.js
import { default as figlet } from "./figlet.js";
console.log(figlet);figlet.js
const figlet = require("figlet");
function wrapOutput(output, config) {
let figletOutput = "";
if (config.textBefore) {
figletOutput += encodeURI(`${config.textBefore}\n`);
}
output.split("\n").forEach((line) => {
figletOutput += encodeURI(`${line}\n`);
});
if (config.textAfter) {
figletOutput += encodeURI(`${config.textAfter}\n`);
}
return `module.exports = decodeURI("${figletOutput}");`;
}
module.exports = function (options) {
const defaultConfig = {
fontOptions: {
font: "ANSI Shadow",
horizontalLayout: "default",
kerning: "default",
verticalLayout: "default",
},
text: "FIGLET-LOADER",
textAfter: null,
textBefore: null,
};
const config = Object.assign({}, defaultConfig, options);
return new Promise(function (resolve, reject) {
figlet.text(config.text, config.fontOptions, (error, output) => {
if (error) {
return reject(error);
}
resolve({
cacheable: true,
code: "module.exports = " + wrapOutput(output, config),
});
});
});
};webpack.config.js
const path = require("path");
module.exports = {
module: {
rules: [
{
test: path.resolve(__dirname, "src", "figlet.js"),
use: [
{
loader: "val-loader",
options: {
text: "FIGLET",
},
},
],
},
],
},
};贡献
如果您尚未阅读，请花点时间阅读我们的贡献指南。