1. yaml-loader
YAML loader for Webpack
yaml-loader
Package: yaml-loader
Created by: eemeli
Last modified: Wed, 21 Feb 2024 14:02:41 GMT
Version: 0.8.1
License: MIT
Downloads: 2,369,129
Repository: https://github.com/eemeli/yaml-loader

Install

npm install yaml-loader
yarn add yaml-loader

yaml-loader for Webpack

YAML loader for Webpack. Allows importing YAML files as JS objects. Uses yaml internally.

Installation

 npm install --save-dev yaml-loader

Usage

 // webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.ya?ml$/,
        use: 'yaml-loader'
      }
    ]
  }
}
 # file.yaml
---
config:
  js:
    key: test
hello: world
 // application.js
import file from './file.yaml'

file.hello === 'world'

Options

In addition to all yaml options used by its parsing methods,
the loader supports the following additional options:

asJSON

If enabled, the loader output is stringified JSON rather than stringified JavaScript. For Webpack v4, you'll need to set the rule to have type: "json". Also useful for chaining with other loaders that expect JSON input.

asStream

If enabled, parses the source file as a stream of YAML documents. With this, the output will always be an array, with entries for each document. If set, namespace is ignored.

To use this option for only some YAML files, it's probably easiest to use a query parameter and match that using Rule.resourceQuery:

 // webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.ya?ml$/,
        oneOf: [
          {
            resourceQuery: /stream/,
            options: { asStream: true },
            loader: 'yaml-loader'
          },
          { loader: 'yaml-loader' }
        ]
      }
    ]
  }
}

Then, importing ./foo.yaml will expect it to contain only one document, but ./bar.yaml?stream may contain multiple documents.

namespace

Allows for exposing a sub-tree of the source document:

 import jsCfg from './file.yaml?namespace=config.js'

jsCfg.key === 'test'

The namespace should be a series of keys, dot separated. Note that any options object in your webpack.config.js rule will be superseded by a ?query.

License

MIT

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin