The example project will now show the inclusion of CSS. This is a very easy thing to get to grips with, as most frontend developers beginning with Webpack 5 should know it well.
To load CSS and run a build, perform the following steps:
- Firstly, install and add style-loader and css-loader to the project's module configuration, using the following command-line instruction:
npm install --save-dev style-loader css-loader
- Next, make the following additions to the webpack.config.js file:
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'
]
}
]
}
};
As you can see from the previous code block, the following additions refer to the use of style-loader and css-loader toward the end of the block. So that you don't get any errors, you should ensure that your code mirrors the example.
It is recommended that both loaders are used together, as almost all CSS operations involve a combination of these methods at some point in the project's development.
In Webpack, regular expressions are used to determine which files should be looked for and be served to a specific loader. This permits the import of a style sheet into the file that depends on it for styling. When that module is run, a <style> tag with the stringified CSS will be inserted into <head> of the HTML file.
- Now, navigate to the directory structure, which we can see in the following example:
webpack5-demo
package.json
webpack.config.js
/dist
bundle.js
index.html
/src
style.css
index.js
/node_modules
We see from this structure that there is a style sheet named style.css. We are going to use this to demonstrate the use of style-loader.
- Enter the following code in src/style.css:
.hello { color: blue; }
This preceding code simply creates a color class style that we will use to attach a style to our frontend and show how the CSS load works.
- Likewise, make the following append to src/index.js:
import _ from 'lodash'; import './style.css'; function component() { const element = document.createElement('div'); // Lodash, now imported by this script element.innerHTML = _.join(['Hello', 'Webpack'], ' '); element.classList.add('hello'); return element; } document.body.appendChild(component());
The preceding code all takes place inside the index.js file. It essentially creates a JavaScript function that appends a <div> element inside whichever files call it from the browser. In this example, it will be the index.html file, aforementioned in the directory structure illustration. The preceding code will then "join" an HTML element to the web page with text stating, 'Hello, Webpack'. We will use this to test whether style-loader and css-loader have been used correctly. As the commented part of the script states, this element appendment will automatically import lodash for use with Webpack.
- Finally, run the build command, as follows:
npm run build ... Asset Size Chunks Chunk Names bundle.js 76.4 KiB 0 [emitted] main Entrypoint main = bundle.js ...
When the index.html file is opened in a browser window, you should see that 'Hello Webpack' is now styled in blue.
To see what happened, inspect the page (not the page source, as it won't show the result) and look at the page's head tags. This is best done using Google's Chrome browser. It should contain the style block that we imported in index.js.
The next natural step is to work on adding images. Images can be added to your project the same way as for any website application. Place these images in whatever desired format in an image folder. This must be in the /src folder, but they can be located anywhere in there. The next procedure is the loading of images with Webpack, and we will go through this now.