{"id":19401777,"url":"https://github.com/webpack-contrib/val-loader","last_synced_at":"2025-05-14T22:09:19.704Z","repository":{"id":3192857,"uuid":"4225759","full_name":"webpack-contrib/val-loader","owner":"webpack-contrib","description":"val loader module for webpack","archived":false,"fork":false,"pushed_at":"2025-01-21T09:24:45.000Z","size":2618,"stargazers_count":186,"open_issues_count":1,"forks_count":29,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-05-08T00:06:28.020Z","etag":null,"topics":["webpack-loader"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webpack-contrib.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"webpack"}},"created_at":"2012-05-04T14:40:12.000Z","updated_at":"2025-04-18T06:39:42.000Z","dependencies_parsed_at":"2024-09-23T23:31:42.929Z","dependency_job_id":"59358f4b-1733-41c1-9ab9-b54e02e19c0e","html_url":"https://github.com/webpack-contrib/val-loader","commit_stats":{"total_commits":157,"total_committers":26,"mean_commits":6.038461538461538,"dds":0.6305732484076434,"last_synced_commit":"d29ac2ddcf885c4c2e7b2041cd99244a4a3b562e"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fval-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fval-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fval-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fval-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webpack-contrib","download_url":"https://codeload.github.com/webpack-contrib/val-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253942895,"owners_count":21988149,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["webpack-loader"],"created_at":"2024-11-10T11:19:45.302Z","updated_at":"2025-05-14T22:09:14.692Z","avatar_url":"https://github.com/webpack-contrib.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n    \u003cimg width=\"200\" height=\"200\" src=\"https://webpack.js.org/assets/icon-square-big.svg\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![tests][tests]][tests-url]\n[![coverage][cover]][cover-url]\n[![discussion][discussion]][discussion-url]\n[![size][size]][size-url]\n\n# val-loader\n\nA webpack loader which executes a given module, and returns the result of the\nexecution at build-time, when the module is required in the bundle. In this way,\nthe loader changes a module from code to a result.\n\nAnother way to view `val-loader`, is that it allows a user a way to make their\nown custom loader logic, without having to write a custom loader.\n\nThe target module is called with two arguments: `(options, loaderContext)`\n\n- `options`: The loader options (for instance provided in the webpack config. See the [example](#examples) below).\n- `loaderContext`: [The loader context](https://webpack.js.org/api/loaders/#the-loader-context).\n\n## Getting Started\n\nTo begin, you'll need to install `val-loader`:\n\n```console\nnpm install val-loader --save-dev\n```\n\n```console\nyarn add -D val-loader\n```\n\n```console\npnpm add -D val-loader\n```\n\nThen add the loader to your `webpack` config. For example:\n\n**target-file.js**\n\n```js\nmodule.exports = (options, loaderContext) =\u003e {\n  return { code: \"module.exports = 42;\" };\n};\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /target-file.js$/,\n        use: [\n          {\n            loader: `val-loader`,\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n**src/entry.js**\n\n```js\nconst answer = require(\"target-file\");\n```\n\nAnd run `webpack` via your preferred method.\n\n## Options\n\n- **[`executableFile`](#executableFile)**\n\n### `executableFile`\n\nType:\n\n```ts\ntype executableFile = string;\n```\n\nDefault: `undefined`\n\nAllows to specify path to the executable file\n\n**data.json**\n\n```json\n{\n  \"years\": \"10\"\n}\n```\n\n**executable-file.js**\n\n```js\nmodule.exports = function yearsInMs(options, loaderContext, content) {\n  const { years } = JSON.parse(content);\n  const value = years * 365 * 24 * 60 * 60 * 1000;\n\n  return {\n    cacheable: true,\n    code: \"module.exports = \" + value,\n  };\n};\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(json)$/i,\n        rules: [\n          {\n            loader: \"val-loader\",\n            options: {\n              executableFile: path.resolve(\n                __dirname,\n                \"fixtures\",\n                \"executableFile.js\",\n              ),\n            },\n          },\n        ],\n      },\n      {\n        test: /\\.json$/i,\n        type: \"asset/resource\",\n      },\n    ],\n  },\n};\n```\n\n## Return Object Properties\n\nTargeted modules of this loader must export a `Function` that returns an object,\nor a `Promise` resolving an object (e.g. async function), containing a `code` property at a minimum, but can\ncontain any number of additional properties.\n\n### `code`\n\nType:\n\n```ts\ntype code = string | Buffer;\n```\n\nDefault: `undefined`\n_Required_\n\nCode passed along to webpack or the next loader that will replace the module.\n\n### `sourceMap`\n\nType:\n\n```ts\ntype sourceMap = object;\n```\n\nDefault: `undefined`\n\nA source map passed along to webpack or the next loader.\n\n### `ast`\n\nType:\n\n```ts\ntype ast = Array\u003cobject\u003e;\n```\n\nDefault: `undefined`\n\nAn [Abstract Syntax Tree](https://en.wikipedia.org/wiki/Abstract_syntax_tree)\nthat will be passed to the next loader. Useful to speed up the build time if the\nnext loader uses the same AST.\n\n### `dependencies`\n\nType:\n\n```ts\ntype dependencies = Array\u003cstring\u003e;\n```\n\nDefault: `[]`\n\nAn array of absolute, native paths to file dependencies that should be watched by webpack for changes.\n\nDependencies can also be added using [`loaderContext.addDependency(file: string)`](https://webpack.js.org/api/loaders/#thisadddependency).\n\n### `contextDependencies`\n\nType:\n\n```ts\ntype contextDependencies = Array\u003cstring\u003e;\n```\n\nDefault: `[]`\n\nAn array of absolute, native paths to directory dependencies that should be watched by webpack for changes.\n\nContext dependencies can also be added using [`loaderContext.addContextDependency(directory: string)`](https://webpack.js.org/api/loaders/#thisaddcontextdependency).\n\n### `buildDependencies`\n\nType:\n\n```ts\ntype buildDependencies = Array\u003cstring\u003e;\n```\n\nDefault: `[]`\n\nAn array of absolute, native paths to directory dependencies that should be watched by webpack for changes.\n\nBuild dependencies can also be added using `loaderContext.addBuildDependency(file: string)`.\n\n### `cacheable`\n\nType:\n\n```ts\ntype cacheable = boolean;\n```\n\nDefault: `false`\n\nIf `true`, specifies that the code can be re-used in watch mode if none of the\n`dependencies` have changed.\n\n## Examples\n\n### Simple\n\nIn this example the loader is configured to operator on a file name of\n`years-in-ms.js`, execute the code, and store the result in the bundle as the\nresult of the execution. This example passes `years` as an `option`, which\ncorresponds to the `years` parameter in the target module exported function:\n\n**years-in-ms.js**\n\n```js\nmodule.exports = function yearsInMs({ years }) {\n  const value = years * 365 * 24 * 60 * 60 * 1000;\n\n  // NOTE: this return value will replace the module in the bundle\n  return {\n    cacheable: true,\n    code: \"module.exports = \" + value,\n  };\n};\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: require.resolve(\"src/years-in-ms.js\"),\n        use: [\n          {\n            loader: \"val-loader\",\n            options: {\n              years: 10,\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\nIn the bundle, requiring the module then returns:\n\n```js\nimport tenYearsMs from \"years-in-ms\";\n\nconsole.log(tenYearsMs); // 315360000000\n```\n\n### Modernizr\n\nExample shows how to build [`modernizr`](https://www.npmjs.com/package/modernizr).\n\n**entry.js**\n\n```js\nimport modenizr from \"./modernizr.js\";\n```\n\n**modernizr.js**\n\n```js\nconst modernizr = require(\"modernizr\");\n\nmodule.exports = function (options) {\n  return new Promise(function (resolve) {\n    // It is impossible to throw an error because modernizr causes the process.exit(1)\n    modernizr.build(options, function (output) {\n      resolve({\n        cacheable: true,\n        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;`,\n      });\n    });\n  });\n};\n```\n\n**webpack.config.js**\n\n```js\nconst path = require(\"path\");\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: path.resolve(__dirname, \"src\", \"modernizr.js\"),\n        use: [\n          {\n            loader: \"val-loader\",\n            options: {\n              minify: false,\n              options: [\"setClasses\"],\n              \"feature-detects\": [\n                \"test/css/flexbox\",\n                \"test/es6/promises\",\n                \"test/serviceworker\",\n              ],\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### Figlet\n\nExample shows how to build [`figlet`](https://www.npmjs.com/package/figlet).\n\n**entry.js**\n\n```js\nimport { default as figlet } from \"./figlet.js\";\n\nconsole.log(figlet);\n```\n\n**figlet.js**\n\n```js\nconst figlet = require(\"figlet\");\n\nfunction wrapOutput(output, config) {\n  let figletOutput = \"\";\n\n  if (config.textBefore) {\n    figletOutput += encodeURI(`${config.textBefore}\\n`);\n  }\n\n  output.split(\"\\n\").forEach((line) =\u003e {\n    figletOutput += encodeURI(`${line}\\n`);\n  });\n\n  if (config.textAfter) {\n    figletOutput += encodeURI(`${config.textAfter}\\n`);\n  }\n\n  return `module.exports = decodeURI(\"${figletOutput}\");`;\n}\n\nmodule.exports = function (options) {\n  const defaultConfig = {\n    fontOptions: {\n      font: \"ANSI Shadow\",\n      horizontalLayout: \"default\",\n      kerning: \"default\",\n      verticalLayout: \"default\",\n    },\n    text: \"FIGLET-LOADER\",\n    textAfter: null,\n    textBefore: null,\n  };\n\n  const config = Object.assign({}, defaultConfig, options);\n\n  return new Promise(function (resolve, reject) {\n    figlet.text(config.text, config.fontOptions, (error, output) =\u003e {\n      if (error) {\n        return reject(error);\n      }\n\n      resolve({\n        cacheable: true,\n        code: \"module.exports = \" + wrapOutput(output, config),\n      });\n    });\n  });\n};\n```\n\n**webpack.config.js**\n\n```js\nconst path = require(\"path\");\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: path.resolve(__dirname, \"src\", \"figlet.js\"),\n        use: [\n          {\n            loader: \"val-loader\",\n            options: {\n              text: \"FIGLET\",\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n## Contributing\n\nPlease take a moment to read our contributing guidelines if you haven't yet done so.\n\n[CONTRIBUTING](./.github/CONTRIBUTING.md)\n\n## License\n\n[MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/val-loader.svg\n[npm-url]: https://npmjs.com/package/val-loader\n[node]: https://img.shields.io/node/v/val-loader.svg\n[node-url]: https://nodejs.org\n[tests]: https://github.com/webpack-contrib/val-loader/workflows/val-loader/badge.svg\n[tests-url]: https://github.com/webpack-contrib/val-loader/actions\n[cover]: https://codecov.io/gh/webpack-contrib/val-loader/branch/master/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack-contrib/val-loader\n[discussion]: https://img.shields.io/github/discussions/webpack/webpack\n[discussion-url]: https://github.com/webpack/webpack/discussions\n[size]: https://packagephobia.now.sh/badge?p=val-loader\n[size-url]: https://packagephobia.now.sh/result?p=val-loader\n","funding_links":["https://opencollective.com/webpack"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack-contrib%2Fval-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebpack-contrib%2Fval-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack-contrib%2Fval-loader/lists"}