Aan de slag met Webpack [Met voorbeeldproject]

webpack is een modulebundelaar waarmee u complexe JavaScript-toepassingen kunt bouwen. Het heeft serieuze tractie bereikt sinds de React-gemeenschap het als het belangrijkste bouwgereedschap koos. Webpack is noch een pakketmanager noch een taakloper omdat het een andere (geavanceerdere) benadering gebruikt, maar het is ook de bedoeling een dynamisch bouwproces opzetten.

Webpack werkt met vanille JavaScript. Je kunt het gebruiken om bundel de statische activa van een applicatie, zoals afbeeldingen, lettertypen, stylesheets en scripts in één enkel bestand terwijl zorg voor alle afhankelijkheden.

U hebt Webpack niet nodig om een eenvoudige app of website te maken, bijvoorbeeld een app met slechts één JavaScript- en één CSS-bestand en een paar afbeeldingen, maar het kan een reddingsboei zijn voor een meer complexe applicatie met verschillende assets en afhankelijkheden.

Webpack versus taaklopers versus Browserify

Dus, hoe komt Webpack op stapel vergeleken met andere bouwtools zoals Grunt, Gulp of Browserify?

Grunt en Gulp zijn taaklopers. In hun configuratiebestand, jij geef de taken op, en de taakrunner voert ze uit. De workflow van een taak loper ziet er in principe zo uit:

Webpack is echter een modulebundelaar die het hele project analyseert, stelt een afhankelijkheidsboom in, en maakt een gebundeld JavaScript-bestand dat het voor de browser dient.

Browserify staat dichter bij Webpack dan taaklopers, zoals het ook is creëert een afhankelijkheidsgrafiek maar dat gebeurt alleen voor JavaScript-modules. Webpack gaat nog een stap verder en bundelt niet alleen de broncode, maar ook ook andere activa zoals afbeeldingen, stylesheets, lettertypen, enz.

Als u meer wilt weten over hoe Webpack zich verhoudt tot andere bouwtools, Ik raad je twee artikelen aan:

Andrew Ray's Webpack: wanneer te gebruiken en waarom op zijn eigen blog
Cory House's Browserify vs Webpack op freeCodeCamp (met geweldige illustraties)

De twee afbeeldingen hierboven zijn van de Webpack-materialen van het Pro React handboek, een andere hulpbron die de moeite waard is om te bekijken.

Vier kernbegrippen van Webpack

Webpack heeft vier hoofdconfiguratie-opties genoemd “Hoofdconcepten” die je in het ontwikkelproces moet definiëren:

binnenkomst - de startpunt van de afhankelijkheidsgrafiek (een of meer JavaScript-bestanden).
uitgang - het bestand waar u het wilt uitvoer om te bundelen naar (een JavaScript-bestand).
laders - transformaties op de activa die verander ze in Webpack-modules zodat ze kunnen zijn toegevoegd aan de afhankelijkheidsgrafiek. Bijvoorbeeld, css-loader wordt gebruikt voor het importeren van CSS-bestanden.
plugins - aangepaste acties en functionaliteiten uitgevoerd op de bundel. Bijvoorbeeld, de i18n-webpack-plugin sluit lokalisatie in de bundel in.

Laders werken per bestand voordat de compilatie plaatsvindt. Plug-ins worden uitgevoerd op de gebundelde code, aan het einde van het compilatieproces.

Installeer Webpack

Naar installeer Webpack, open de opdrachtregel, ga naar uw projectmap en voer de volgende opdracht uit:

 npm init

Als u de configuratie niet zelf wilt doen, kunt u npm maken bevolken de package.json bestand met de standaardwaarden met het volgende commando:

 npm init -y

Installeer vervolgens Webpack:

 npm installeer webpack --save-dev

Als u de standaardwaarden hebt gebruikt, is dit uw package.json bestand zou er nu moeten uitzien (de eigenschappen kunnen in een andere volgorde staan):

 "naam": "_tests", "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependencies": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," scripts ": " test ":" echo \ "Fout: geen test opgegeven \" && exit 1 "," trefwoorden ": []," auteur ":" "," licentie ":" ISC "

Maak het configuratiebestand aan

U moet een maken webpack.config.js het dossier in de hoofdmap van het project. Dit configuratiebestand speelt een centrale rol, omdat dit is waar u dat wilt definieer de vier kernbegrippen (invoerpunten, uitvoer, laders, plug-ins).

De webpack.config.js het dossier houdt een configuratieobject vast van welke eigenschappen u moet specificeren. In dit artikel zullen we de vier eigenschappen specificeren die komen overeen met de vier kernbegrippen (binnenkomst, uitgang, module, en inpluggen), maar het config-object heeft ook andere eigenschappen.

1. Creëer de ingang (en)

Je kan hebben een of meer toegangspunten. U moet ze definiëren in de binnenkomst eigendom.

Plaats het volgende codefragment in de webpack.config.js het dossier. Het geeft een ingangspunt aan:

 module.exports = entry: "./src/script.js";

Om meer dan één toegangspunten te specificeren die u kunt gebruiken de syntaxis van de array of het object.

In je projectmap, maak een nieuw src map en een script.js bestand erin. Dit zal jouw zijn ingangspunt. Voor testdoeleinden, gewoon plaats een string in het. Ik heb de volgende gebruikt (u kunt echter ook een interessantere gebruiken):

 const greeting = "Hallo, ik ben een starterproject van Webpack."; document.write (groet);

2. Definieer de uitvoer

Je kan hebben slechts één uitvoerbestand. Webpack bundelt alle activa in dit bestand. U moet het configureren uitgang eigendom op de volgende manier:

 const path = require ("path"); module.exports = entry: "./src/script.js", output: filename: "bundle.js", pad: path.resolve (__ dirname, 'dist');

De bestandsnaam eigenschap definieert de naam van het gebundelde bestand, Terwijl de pad eigendom geeft de naam van de map aan. Het bovenstaande voorbeeld maakt de /dist/bundle.js het dossier.

Hoewel het niet verplicht is, is het beter om dit te doen gebruik de path.resolve () methode wanneer u de definieert pad eigendom, zoals het zorgt voor een nauwkeurige module resolutie (het absolute pad van de uitvoer wordt gemaakt volgens verschillende regels in verschillende omgevingen, module-resolutie lost deze discrepantie op). Als je gebruikt path.resolve, je moet vereisen de pad Knoop module aan de bovenkant van de webpack.config.js het dossier.

3. Voeg de laders toe

Naar voeg de laders toe, je moet de module eigendom. Hieronder voegen we de babel-loader waarmee je kunt gebruik veilig de ECMAScript 6-functies in uw JS-bestanden:

 const path = require ("path"); module.exports = entry: "./src/script.js", output: filename: "bundle.js", pad: path.resolve (__ dirname, 'dist'), module: rules: [test : /\.js$/, exclude: / (node_modules | bower_components) /, gebruik: loader: "babel-loader", opties: presets: ["env"]];

De config lijkt misschien moeilijk, maar hij is gewoon gekopieerd en geplakt Babel loader's documentatie. De meeste laders worden geleverd met een leesmij-bestand of een soort documentatie, zodat u (bijna) altijd weet hoe u ze goed moet configureren. En de Webpack-documenten hebben ook een pagina met uitleg hoe te configureren module.rules.

Je kan toevoegen zoveel laders als je nodig hebt, hier is de volledige lijst. Merk op dat je dat ook moet doen installeer elke lader met npm om ze te laten werken. Voor de Babel-lader moet u de noodzakelijke knooppuntpakketten met npm installeren:

 npm install --save-dev babel-loader babel-core babel-preset-env webpack

Als je naar je kijkt package.json bestand, je zult die npm zien drie Babel-gerelateerde pakketten toegevoegd aan de devDependencies eigendom, deze zorgen voor de ES6-compilatie.

4. Voeg de plug-ins toe

Naar voeg de plug-ins toe, u moet het plugins eigendom. Plus, je moet ook vereisen de plug-ins één voor één, omdat het externe modules zijn.

In ons voorbeeld voegen we twee Webpack-plug-ins toe: de HTML Webpack-plug-in en de Preload Webpack-plug-in. Webpack heeft een mooi plugin-ecosysteem, u kunt hier de volledige lijst doorbladeren.

Om de plug-ins als knoopmodules te vereisen, maak twee nieuwe constanten: HtmlWebpackPlugin en PreloadWebpackPlugin en gebruik de vereisen() functie.

 const path = require ("path"); const HtmlWebpackPlugin = require ("html-webpack-plugin"); const PreloadWebpackPlugin = require ("preload-webpack-plugin"); module.exports = entry: "./src/script.js", output: filename: "bundle.js", pad: path.resolve (__ dirname, 'dist'), module: rules: [test : /\.js$/, exclude: / (node_modules | bower_components) /, gebruik: loader: "babel-loader", opties: presets: ["env"]], plug-ins: [new HtmlWebpackPlugin (), nieuwe PreloadWebpackPlugin ()];

Net als in het geval van laders, moet je dat ook doen installeer de Webpack-plug-ins met npm. Om de twee plug-ins in het voorbeeld te installeren, voert u de volgende twee opdrachten uit op uw opdrachtregel:

 npm install html-webpack-plugin --save-dev npm install --save-dev preload-webpack-plugin

Als je je controleert package.json bestand nu, je zult dat npm zien de twee plug-ins toegevoegd aan de devDependencies eigendom.

Voer Webpack uit

Naar maak de afhankelijkheidsboom en uitvoer de bundel, voer de volgende opdracht uit op de opdrachtregel:

 webpack

Normaal duurt een of twee minuten voor Webpack om het project te bouwen. Als u klaar bent, ziet u een vergelijkbaar bericht in uw CLI:

Als alles goed ging, was Webpack creëerde een dist map in de hoofdmap van uw project en plaatste de twee gebundelde bestanden (bundle.js en index.html) in het.

Github repo

Als u het hele project wilt uitchecken, downloaden of aanvullen, bekijk dan onze Github-repo.