Skip to content
Freewebsolution
Menu
  • Home
  • angular
  • php
  • guide
  • laravel
  • react
  • corsi
Freewebsolution
Menu
webpack-in-es6

Il WebPack in ES6: guida al suo utilizzo -#3

Posted on 20 Maggio 2019 by lucio
Category: corso javascript es6, guide
3.532 views Tempo di lettura: 4 minuti

Il Webpack può essere definito come uno static module bundler per applicazioni JavaScript il cui suo scopo è quello di realizzare un pacchetto di assets utilizzabile direttamente nel browser.

La soluzione di un transpiler online , vista nella scorsa guida, è manuale e quindi non adatta a progetti di ampie dimensioni.In tal caso è utile affidarsi ad un tool ,come il WebPack, il quale ,tra l’altro,lavora molto bene  con Babel.

Installare il WebPack

Innanzitutto organiziamo il nostro progetto all’interno di una cartella che chiameremo , con molta fantasia, project-ES6, quindi inizializiamo il progetto dichiarando il package.json. Questo si può editare sia manualmente che da riga di comando digitando:

npm init

Vi ricordo che dovete prima installare, se no lo avete già fatto, node.js,  il quale è un framework che ci consente di scrivere applicazioni web in  javascript anche server side. In questo caso lo sfruttiamo per scaricare altre librerie.

Personalizzate il file come meglio credete, anche se vi consiglio di lasciare tutto così almeno per il momento. Date invio ad ogni domanda.

il-webpack

Se tutto è andato liscio nella directory del vostro progetto creata in precedenza ora vi è il file package.json, come in figura sotto:

package-json

dove vi sono definiti il nome del progetto, la versione, la descrizione,il main che sarebbe l’entry point (punto di ingresso) dell’applicazione, ecc…

E’ arrivato il momento di installare la dipendenza globale webpack e la dipendenza locale di sviluppo babel-loader:

npm i -g webpack

quindi:

npm i --save-dev babel-loader

Babel loader transpila il codice ES6 in ES5.

l’istruzione –save-dev crea le dipendenze (o

devDependencies)all’interno del file package.json a livello locale

--save-dev

Definire il file di configurazione

Nella root del progetto crete il file index.js (che sarà l’entry point dell’applicazione) ed il file di configurazione del webpack, il webpack.config.json (necessario alla corretta configurazione e funzionamento dello stesso), quindi scrivete:

module.exports = {

    entry:'./index.js',

    output:{

        filename:'bundle.js'

    },

    mode: 'development',

    module:{

        rules: [

            {

                test: /\.js$/,

                exclude: /node_modules/,

                use: {

                    loader: "babel-loader"

                }

            }

        ]

    }

}

entry: qui inserite il nome del file.js (entry point relativo al main del package.json);
output: inserite il nome del file che conterà l’output del progetto, ossia il file transpilato.

Fatto ciò posizionatevi all’interno della cartella principale del progetto e ,da riga di comando,digitate:

webpack

se non ci sono errori ora, sempre all’interno della root, dovrebbe esserci la cartella dist contenente file bundle.js il quale conterrà il codice transpilato.

Se dovesse restituire un errore del genere:

error-config-babel-loader

installate anche il @babel-core, quindi da riga di comando digitate:

npm install @babel/core --save

Proviamo il webpack

Finalmente siamo pronti per testare il nostro bel webpack. Aprite il file index.js (entry point) e digitate codice javascript ES6 a piacere:

let a =1;
const b = 2;
console.log(a+b);

una volta fatto transpilatelo, quindi digitate:

webpack

All’interno della root del progetto create il file index.html dove scriverete:

<html>

    <body>

        <script src="dist/bundle.js"></script>

    </body>

</html>

come potete notare richiamo il file bundle.js.

Ora aprite il file index.html con un qualsiasi browser per testarne il funzionamento. Digitate da tastiera f12 (ispeziona), da console dovrebbe esserci il risultato 3 dato dalla somma delle variabili a e b.

Anche per oggi è tutto, se avete dubbi non esitate a contattarmi.
Vi ricordo che potete acquistare il mio corso completo di Angular 7.x ad un prezzo scontatissimo solo per pochissimi giorni oramai.

Potrebbero interessarti:

  • laravel_livewire
    Creare Interfacce Dinamiche con Laravel 11 e…

Lucio Ticali

Lucio Ticali - Insegnante su Udemy

Hi, I'm Lucio Ticali, author of this blog. I am a Full stack developer and Udemy Instructor with over 20 years of experience in the Information Technology sector.

Ultime da Freeweb

  • Creare un’applicazione di e-commerce con Laravel e Stripe
  • Come integrare Stripe con Laravel 11
  • Realizza il gioco del solitario con React e Laravel: Parte 1
  • Creare Interfacce Dinamiche con Laravel 11 e Livewire 3: Guida Passo-Passo
  • Come creare una Progressive Web App (PWA) con Laravel 11

Corsi da non perdere

Laravel: La guida pratica e completa da neofita ad esperto

€ 9.99 / €12.99 guida_laravel guida completa

Ebook da non perdere

Laravel 11 dall'idea al codice

€ 9.99 / €21.99 laravel 11: dall'idea al codice

©Copyright 2025 - Freewebsolution. All rights reserved, Lucio Ticali Lucio ticali Udemy instructor instructor. Privacy-Informativa cookies