Come funziona il webpack?

Question

Non capisco come funzioni la funzione require di webpack. Ad esempio, sto leggendo this article circa webpack e non v'è il seguente esempio: inizio

Let creando il nostro progetto e l'installazione di Webpack, ci sarà anche tirare in jQuery per dimostrare alcune cose in seguito.

$ npm init 
$ npm install jquery --save 
$ npm install webpack --save-dev 

Ora creiamo il nostro punto di ingresso dell'applicazione, in pianura ES5 per ora:

src/index.js

var $ = require('jquery'); 

$('body').html('Hello'); 

E creiamo la nostra Webpack configurazione, in un file webpack.config.js. configurazione Webpack è solo Javascript, e ha bisogno di esportare un oggetto:

webpack.config.js

module.exports = { 
    entry: './src', 
    output: { 
     path:  'builds', 
     filename: 'bundle.js', 
    }, 
}; 

Come fa webpack sapere che cosa è jquery in require('jquery')? Non vedo alcuna opzione di configurazione specificata relativa a jquery.

Answer 1

In questo caso, funzionerà proprio come CommonJS require s (ad es., Nodo require s). (Di Webpack require s supportano una maggiore flessibilità rispetto ai tradizionali require s, ma il comportamento di default è la stessa.)

This Modules section in the docs spiega come Nodo capisce cosa per tornare da una chiamata a require(). Se hai bisogno di 'jquery', prima cerca un modulo nativo con quel nome, non ne trova uno e poi guarda in node_modules (perché non c'è / o ./ all'inizio del tuo percorso). Dal momento che 'jquery' è una cartella, guarda il file package.json per vedere cosa dichiara il file main del pacchetto, e questo è ciò che viene eseguito.

Vale la pena leggere tutto; la parte di memorizzazione nella cache, ad esempio, è importante sapere.