WebPack: Guida all’installazione per compilare SASS

Webpack è un “module bundler” per JavaScript che permette a partire da un’insieme di file sorgenti di creare un pacchetto di assets utilizzabile direttamente nel browser. Questo può servire per eseguire file in formato SASS oppure TypeScript al interno del nostro progetto ma anche per caricare immagini e font in modo più snello.

In questo breve articolo faremo un’introduzione su come installarlo e configurarlo nel modo più semplice per un sito web dove vogliamo scrivere il nostro codice CSS tramite il pre-processore SASS.

Per prima cosa organizziamo i file all’interno della cartella /src

Andremo a scrivere un file index.scss dove inseriremo il nostro codice SASS per esempio:

$background-color: #AACCEE;
body{
	background: $background-color;
}

Successivamente all’interno della stessa cartella creiamo il file JS con la logica del sito e dove per prima cosa gli indicheremo di caricare il file index.scss:

import './index.scss';
console.log ("Hello");

Nella root del nostro progetto invece andiamo a posizionare il file di configurazione webpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    entry: [
        './src/index.js'  
        ],
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'main.js',
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
}

Questo file indica al compilatore di prendere come sorgente il file javascript creato precedentemente e tramite anche un plugin (MiniCSS) dividerà il codice CSS del import da quello JS e posizionerà il risultato nella cartella /dist dove ci sarà di conseguenza il file index.html del nostro sito web:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
    		<link rel="stylesheet" href="main.css">
  	</head>
   	<body>
    		<h1>TEST</h1>
    		<p>Look at the console</p>
		<script src="main.js"></script>
   	</body>
 </html>

Preparati i file possiamo passare alla configurazione di webpack da terminale che richiede chiaramente di aver installato precedentemente node.js sul proprio computer. L’istallazione e molto semplice e può essere fatta automaticamente visitando il sito di Node:

https://nodejs.org/it/

Posizioniamoci quindi nella cartella del progetto tramite comando di cambio directory (cd) e poi lanciamo l’inizializzazione di node-modules per questa cartella specifica:

npm init -y

Fatto questo andiamo ad aggiungere l’ultima versione di webpack:

npm install webpack@next webpack-cli --save-dev --force

Poi chiediamo a webpack di installare le dipendenze per poter trasformare i file sass in css:

npm install --save-dev style-loader css-loader sass-loader node-sass mini-css-extract-plugin

Modifichiamo quindi la riga script del file package.json per poter lanciare il build:

"scripts": {
"build": "webpack"
},

Infine possiamo lanciare il build:

npm run build

Se tutto è stato fatto correttamente verranno creati i files dist/main.js e dist/main.css

guida installazione webpack sass

Per ulteriori informazioni potete consultare il sito di WebPack.

Stay Update!

Posted in CSS.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.