This content originally appeared on DEV Community and was authored by CodeOzz
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 :D -> https://www.buymeacoffee.com/CodeoZ
This content originally appeared on DEV Community and was authored by CodeOzz
CodeOzz | Sciencx (2021-08-04T10:50:47+00:00) Webpack Academy #1: Loaders. Retrieved from https://www.scien.cx/2021/08/04/webpack-academy-1-loaders/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.