Webpack Academy #1: Loaders

As we saw in the last course, webpack can handle js and json file !

But what happened if we need to import css file ?

Add css file

We need add a new entry point to your application since we have no entry file for css file yet !

webpack.co…

As we saw in the last course, webpack can handle js and json file !

But what happened if we need to import css file ?



Add css file

We need add a new entry point to your application since we have no entry file for css file yet !

webpack.config.js

    entry: {
        myApp: [
            "./src/style.css",
            "./src/main.js",
        ],
    },

style.css

.toto {
    color: blue;
}

Let’s go to build this !

ERROR in ./src/style.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .toto {
|     color: blue;
| }

What? why?



Loader

As we saw before, webpack only handle js and json file, but webpack let us to use loader, this function is simple -> translate file to webpack in order to handle it !

For handle css file, we will use two loader !

    module: {
        rules: [
            {
                // Match file extension
                test: /\.css$/,
                // Order of loader from bottom to up
                use: [
                    'style-loader',
                    'css-loader'
                ],
            }
        ]
    },

First css-loader will resolve css import issue, and after style-loader will inject css into the DOM !

So if we add a html file

index.html

<!DOCTYPE html>
<html>
<body>
    <h1 class="toto">My First Heading</h1>

    <p>My first paragraph.</p>
</body>
<script src="dist/bundle.js"></script>
</html>

We can see that your <h1> is blue !



Conclusion

It’s just a little example but if you use webpack, you will have a lot of loader, for exemple if you are using ts you will need loader to handle .ts file, if we need to import image we will need another loader etc…

Code here -> https://github.com/Code-Oz/webpack-academy/tree/5e80e4c080c156d1ebd261fc80e3c505d92473a7

I hope you want to learn more about webpack in my academy !

If you want to have nice article to read about web dev, you can subscribe to my FREE newsletter at this url -> https://codeoz.substack.com/welcome

And you can follow me on :

Twitter : https://twitter.com/code__oz

Github: https://github.com/Code-Oz

And if you want to buy me a coffee 😀 -> https://www.buymeacoffee.com/CodeoZ


Print Share Comment Cite Upload Translate
APA
CodeOzz | Sciencx (2024-03-29T06:08:31+00:00) » Webpack Academy #1: Loaders. Retrieved from https://www.scien.cx/2021/08/04/webpack-academy-1-loaders/.
MLA
" » Webpack Academy #1: Loaders." CodeOzz | Sciencx - Wednesday August 4, 2021, https://www.scien.cx/2021/08/04/webpack-academy-1-loaders/
HARVARD
CodeOzz | Sciencx Wednesday August 4, 2021 » Webpack Academy #1: Loaders., viewed 2024-03-29T06:08:31+00:00,<https://www.scien.cx/2021/08/04/webpack-academy-1-loaders/>
VANCOUVER
CodeOzz | Sciencx - » Webpack Academy #1: Loaders. [Internet]. [Accessed 2024-03-29T06:08:31+00:00]. Available from: https://www.scien.cx/2021/08/04/webpack-academy-1-loaders/
CHICAGO
" » Webpack Academy #1: Loaders." CodeOzz | Sciencx - Accessed 2024-03-29T06:08:31+00:00. https://www.scien.cx/2021/08/04/webpack-academy-1-loaders/
IEEE
" » Webpack Academy #1: Loaders." CodeOzz | Sciencx [Online]. Available: https://www.scien.cx/2021/08/04/webpack-academy-1-loaders/. [Accessed: 2024-03-29T06:08:31+00:00]
rf:citation
» Webpack Academy #1: Loaders | CodeOzz | Sciencx | https://www.scien.cx/2021/08/04/webpack-academy-1-loaders/ | 2024-03-29T06:08:31+00:00
https://github.com/addpipe/simple-recorderjs-demo