Another useful asset that can be loaded is data. Data is an incredibly important asset to be loaded. This will include files such as JSON, Comma-Separated Values (CSV), Tab-Separated Values (TSV), and XML files. Using a command such as import Data from './data.json' will work by default, meaning JSON support is built into Webpack 5.
To import the other formats, a loader must be used. The following subsection demonstrates a method for handling all three. The following steps should be taken:
- To begin, you must install the csv-loader and xml-loader loaders using the command line, as follows:
npm install --save-dev csv-loader xml-loader
The preceding code block simply shows the command line to install two data loaders.
- Open and append the webpack.config.js configuration file, and ensure that it looks like the following example:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
{
test: /.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /.xml$/,
use: [
'xml-loader'
]
}
]
}
};
In the preceding code block, the lower portion shows the use of csv-loader and xml-loader. It is this amendment that will be needed this time to load the data into our project.
- Next, we must add a data file to the source directory. We will be adding an XML data file to our project, shown in bold text in the following code block:
webpack5-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- data.xml
|- samplefont.woff
|- sample-font.woff2
|- icon.png
|- style.css
|- index.js
|- /node_modules
Take a look at the preceding data.xml file in the src directory of your project folders. Let's take a closer look inside this file to see what the data is, as follows:
<?xml version="1.0" encoding="UTF-8"?> <note> <to>Tim</to> <from>Jakob</from> <heading>Reminder</heading> <body>Call me tomorrow</body> </note>
As you can see from the previous block of code, the contents are a very basic XML dataset. We are going to use this to import the XML data into our project's index.html page, and we will need this to be formatted correctly to ensure that it works.
Any one of those four types of data (JSON, CSV, TSV, and XML) can be imported, and the data variable you import it to will contain parsed JSON.
- Be sure to amend the src/index.js file to expose the data file. Note the import of ./data.xml, as illustrated in the following code block:
import _ from 'lodash'; import './style.css'; import Icon from './icon.png'; import Data from './data.xml'; function component() { const element = document.createElement('div'); // Lodash, now imported by this script element.innerHTML = _.join(['Hello', 'Webpack'], ' '); element.classList.add('hello'); // Add the image to our existing div. const myIcon = new Image(); myIcon.src = Icon; element.appendChild(myIcon); console.log(Data); return element; } document.body.appendChild(component());
The addition of the import function, and little else, is all we need this time to demonstrate the usage. Anyone familiar enough with JavaScript will also know how to make use of this to run their particular project very easily.
- Run a build and check that the data loads correctly, as follows:
npm run build
Once a npm build is run, the index.html file can be opened. Examining the console (such as under developer tools when using Chrome) will show the data being logged after import.
Something related, but more to do with project architecture, is the arrangement of global assets for project consumption. Let's explore that in the following subsection.