sankassio99/webpack_course

Loaders

This is an important resource for the Webpack tool to read the files, along with the JavaScript programming language

Css

Create a css file

Import in your js file

import './title.css';

Use in webpack config

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader', 'css-loader'
                ]
            }
        ]
    }

dont forget to download npm dependencies

npm i -D style-loader css-loader

Just run build

Imagens

{
	test: /\.(png|jpg|jpeg)$/,
	use: [
	    'file-loader'
	]
}

Sass import

We gonna need

style-loader, css-loader, sass-loader

npm i -D node-sass sass-loader

{
    test: /\.scss$/,
    use: [
        'style-loader', 'css-loader', 'sass-loader'
    ]
}

ES6+ future functionality

babel-loader;

This example it’s only to this functionality - Spread

// Babel Spread - compiled by webpack babel-loader
const obj = { a:1, b: 2, c: 3, d: 4 };

let {a, b, ...teste} = obj;

console.log(a);
console.log(b);
console.log(teste);

{
    test: /\.m?js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader',
        // what you need to run the extra functionality
        options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-object-rest-spread']
        }
    }
}

Html

htm-loader

{
    test: /\.html$/,
    use: 'html-loader'
},

import warningTemplate from './templates/warning.html'

// HTML import
const body = document.querySelector("body");
body.innerHTML += warningTemplate

Text

Raw-loader

For import plain text

.txt

Json

Don’t needs loaders

// JSON file import
import jsonFile from './files/jsonFile.json'
const pessoa = jsonFile;
console.log(pessoa);

// output
{name: 'José', idade: 22, rule: 'dev'}

Tips

Keep minimum loaders to get better performance