Webpack: Installazione e compilazione file SASS

Webpack è un modulo per Node che permette a partire da un’insieme di file sorgenti di creare risorse utilizzabili direttamente nel browser. Questo può servire per eseguire files in formato SASS oppure TypeScript al interno del nostro progetto ma anche per caricare immagini e font in modo più ottimizzato.

In questo breve articolo faremo un’introduzione su come installare e configurare questo strumento 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. Andiamo quindi a scrivere un file index.scss dove inseriremo il nostro codice SASS per esempio anche con una semplice variabile colore.

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

Successivamente all’interno della stessa cartella /src 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 vero e proprio 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 un plugin (MiniCSS) dividerà il codice CSS del import fatto precedentemente 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>
		http://main.js
   	</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/

Da terminale posizioniamoci quindi nella cartella del progetto tramite comando di cambio directory (cd) e poi lanciamo l’inizializzazione di node-modules localmente su 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 formato CSS:

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

Modifichiamo quindi la riga scripts del file generato package.json

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

Infine possiamo lanciare il build con l’istruzione:

npm run build

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

Fare o non fare. Non esiste provare.

Webpack: Installazione e compilazione file SASS

Condividi: