This section of this chapter will be of great use to anyone hoping to streamline their bundling strategy. It is not very well known that Webpack can be used for bundling both libraries and applications.
We will begin with a hypothetical custom library project, which we'll call numbers-to-text. It will work by converting numerals from, say, 1 to 5 to a textual representation of the number, such as 3 to three.
Let's discuss each task in detail and explain what is happening in the code, with examples to help us understand with greater clarity exactly what is happening and how the code behaves. We will proceed as follows:
- We will begin by getting our project structure in line. The basic project structure should look like this:
|- webpack.config.js
|- package.json
|- /src
|- index.js
|- ref.json
Note that the structure may look different from the previous tutorial—namely, the presence of the ref.json file. You will need to create those extra files if you don't have them before we go any further.
- Next, we come back to the command-line interface (CLI), and we first need to initialize npm, then make sure we have installed Webpack and lodash. If you have already installed this by following the example in previous chapters, then don't worry—duplicate installation attempts will only overwrite the last and shouldn't cause any harm at all. Run the following code:
npm init -y
npm install --save-dev webpack lodash
- That being done, we avert our attention to the newly built src/ref.json JSON file. This is the essential data of the custom library. It should look like the following example:
[
{
"num": 1,
"word": "One"
},
{
"num": 2,
"word": "Two"
},
{
"num": 3,
"word": "Three"
},
{
"num": 4,
"word": "Four"
},
{
"num": 5,
"word": "Five"
},
{
"num": 0,
"word": "Zero"
}
]
As you can see, this constitutes a simple list of options representing a number, with a corresponding written word version of that number. This will form the backbone of our very simple library structure, to demonstrate the concept in principle. Once the tutorial is complete, you should naturally see how you can adapt the library to your needs, no matter how complex.
- Now, we need to make an index file (such as src/index.js). You should follow the coding displayed in this block:
import _ from 'lodash';
import numRef from './ref.json';
export function numToWord(num) {
return _.reduce(numRef, (accum, ref) => {
return ref.num === num ? ref.word : accum;
}, '');
}
export function wordToNum(word) {
return _.reduce(numRef, (accum, ref) => {
return ref.word === word && word.toLowerCase() ? ref.num : accum;
}, -1);
}
You can see from the preceding code how the index file essentially contains a series of export and return functions related to the JSON file contents.
- Now, we need to define the usage specification. This is done as follows:
-
- ES2015 module import:
import * as numbersToText from 'numbers-to-text';
// ...
numbersToText.wordToNum('Two');
-
- CommonJS module require:
const numbersToText = require('numbersToText');
// ...
- Use the following snippet of code, in the same file, to set the functions when using AMD:
numbersToText.wordToNum('Two');
AMD module requires:
require(['numbersToText'], function (numbersToText) {
numbersToText.wordToNum('Two');
});
The user can also use the library by loading it via a script tag, like this:
<!doctype html>
<html>
...
<script src="https://unpkg.com/webpack-numbers"></script>
<script>
// Global variable
numbersToText.wordToNum('Five')
// Property in the window object
window.numbersToText.wordToNum('Five')
</script>
</html>
This is the most common way in which a library is loaded, and, as a JavaScript developer, it's something that should be second nature to follow. That being said, it can be configured to expose a property in the global object for Node.js or as a property in a this object.
This takes us to the basic configuration for the library. There is more than one level of configuration for authorizing this library, so this is just the first step.