CODEWITHSUNDEEP
javascriptwebpack
stackjlei
stackjlei

Reputation: 10035

Webpack loaders in layman terms

Am I correct in understanding that Webpack transforms everything you have into JS code only? So that even if you have CSS, it will be turn into JS (in a bundle) as long as you have the correct loader?

Loaders can transform files from a different language like CoffeeScript to JavaScript, or inline images as data URLs. Loaders even allow you to do things like require() css files right in your JavaScript!”

Upvotes: 0

Views: 117

Answers (1)

shyammakwana.me
shyammakwana.me

Reputation: 5752

Loaders won't convert CSS into JavaScript but it will allow you to import CSS files right from your JavaScript file. For e.g. you have components based application architecture and each component has it's own CSS, you can load css right from component's JS file.

Like this (in your app.js)

import styles from './app.css';

OR more generic

import './app.css';

From Official site

Loaders can transform files from a different language (like TypeScript) to JavaScript, or inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

Example

For example, you can use loaders to tell webpack to load a CSS file or to convert TypeScript to JavaScript. To do this, you would start by installing the loaders you need:

npm install --save-dev css-loader
npm install --save-dev ts-loader

And then instruct webpack to use the css-loader for every .css file and the ts-loader for all .ts files:

Upvotes: 1

Related Questions