Working with JSON

Most of the time, when you work with frameworks, you will need to communicate across languages and between applications. This is done with JSON. JSON works similarly to YAML in this way, but it is much easier to understand how Webpack works with JSON, first.

JSON files are understood by Webpack's compiler without the need for a dedicated loader and, therefore, can be considered a native script to Webpack's bundler, just as JavaScript is.

As alluded to in this guide so far, JSON files are instrumentally used for package composition. How Webpack records and tracks the use of loaders and dependencies is through a schema in the form of a JSON file. This is typically the package.json file, or sometimes the package.lock.json file, which records the exact version of each package installed so that it can be reinstalled. In this context, "package" refers to loaders and dependencies, collectively.

Each JSON file must be programmed correctly or it won't be readable by Webpack. Unlike JavaScript, comments are not permitted in code to guide users, so you may want to use a README file to explain its content and purpose to the user.

The structure of a JSON file is a little different from JavaScipt and contains a different array of elements, such as keys. Take the following code block as an example:

module: {
rules: [{
test: /.yaml$/,
use: 'js-yaml-loader',
}]
}

This is an extract from the package.json file that we'll use a little later on in this chapter. The content of this block essentially declares the parameters of a module. The named module is used as a key with a colon after it. These keys are sometimes referred to as names and they are where options are placed. This code sets a series of rules, and in this rule is the instruction to make Webpack use js-yaml-loader whenever it transpiles the content modules. 

You must ensure that braces and brackets are used in the right sequence or Webpack won't be able to read the code.

As a JavaScript developer, you may be very familiar with JSON and how it is used. However, it's worth spelling out in case there are any blind spots. YAML is a more complex framework but it is something you will often encounter, so it's only progressively more complex than JSON. Let's get to grips with it now.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.12.242