Eine Einführung in Webpack: Was es ist und wie man es benutzt

Einführung

Okay, ich nehme an, Sie haben von Webpack gehört - deshalb sind Sie hier, richtig? Die eigentliche Frage ist, was wissen Sie darüber? Vielleicht wissen Sie ein paar Dinge darüber, wie es funktioniert, oder Sie haben absolut keine Ahnung. In jedem Fall kann ich Ihnen versichern, dass Sie sich nach dem Lesen dieses Artikels mit der gesamten Webpack-Situation wahrscheinlich wohl genug fühlen werden .

Schließlich ist die Notwendigkeit die Mutter der Erfindung…

Eine perfekte Möglichkeit zu sagen, warum Webpack existiert, ist das obige Zitat. Aber um es besser zu verstehen, müssen wir zurückgehen, als JavaScript nicht das neue sexy Ding war, in jenen alten Zeiten, als eine Website nur ein kleines Bündel guter alter war . HTML, CSS und wahrscheinlich eine oder mehrere JavaScript-Dateien in einigen Fällen. Aber sehr bald würde sich das alles ändern.

Was war das Problem?

Die gesamte Entwickler-Community war ständig bemüht, die allgemeine Benutzer- und Entwicklererfahrung bei der Verwendung und Erstellung von Javascript / Webanwendungen zu verbessern. Daher haben wir viele neue Bibliotheken und Frameworks geseheneingeführt.

Im Laufe der Zeit haben sich auch einige Entwurfsmuster entwickelt, um Entwicklern eine bessere, leistungsfähigere und dennoch sehr einfache Möglichkeit zum Schreiben komplexer JavaScript-Anwendungen zu bieten. Websites zuvor waren nicht mehr nur ein kleines Paket mit einer ungeraden Anzahl von Dateien. Sie gaben an, mit der Einführung von JavaScript-Modulen sperrig zu werden, da das Schreiben von gekapselten kleinen Codestücken der neue Trend sei. All dies führte schließlich zu einer Situation, in der wir 4x oder 5x Dateien im gesamten Anwendungspaket hatten.

Die Gesamtgröße der Anwendung war nicht nur eine Herausforderung, sondern es gab auch eine große Lücke in der Art des Codes, den Entwickler geschrieben haben, und in der Art der Codebrowser, die sie verstehen konnten. Entwickler mussten viel Hilfecode namens Polyfills verwenden , um sicherzustellen, dass die Browser den Code in ihren Paketen interpretieren konnten.

Um diese Probleme zu lösen, wurde ein Webpack erstellt. Webpack ist ein statischer Modulbündler.

Wie war Webpack die Antwort?

Kurz gesagt, Webpack durchsucht Ihr Paket und erstellt ein sogenanntes Abhängigkeitsdiagramm, das aus verschiedenen Modulen besteht, die Ihre Webanwendung benötigen würde, um wie erwartet zu funktionieren. Abhängig von diesem Diagramm wird dann ein neues Paket erstellt, das aus der Mindestanzahl der erforderlichen Dateien besteht, häufig nur aus einer einzigen Datei bundle.js, die einfach in die HTML-Datei eingefügt und für die Anwendung verwendet werden kann.

Im nächsten Teil dieses Artikels werde ich Sie Schritt für Schritt durch die Einrichtung des Webpacks führen. Am Ende hoffe ich, dass Sie die Grundlagen von Webpack verstehen. Also lasst uns das ins Rollen bringen ...

Was bauen wir?

Sie haben wahrscheinlich von ReactJS gehört. Wenn Sie reactJS kennen, wissen Sie wahrscheinlich, was create-react-app ist. Für diejenigen unter Ihnen, die keine Ahnung haben, was eines dieser beiden Dinge ist, ist ReactJS eine UI-Bibliothek, die beim Erstellen intelligenter komplexer UIs sehr hilfreich ist, und die Create-React -App ist ein CLI-Toolzum Einrichten oder Booten eines Boilerplate-Entwickler-Setups, um React-Anwendungen zu erstellen.

Heute erstellen wir eine einfache React-Anwendung, ohne jedoch die CLI create-react-app zu verwenden. Ich hoffe, das klingt für dich lustig genug. :) :)

Installationsphase

npm int

Das ist richtig, so fangen fast alle guten Dinge an: einfaches altes npm init. Ich werde VS Code verwenden, kann aber jeden Code-Editor verwenden, den Sie möchten, um die Dinge in Gang zu bringen.

Bevor Sie dies tun können, stellen Sie sicher, dass Sie den neuesten NodeJS und die npm-Version lokal auf Ihrem Computer installiert haben. Klicken Sie auf jeden dieser Links, um mehr über den Prozess zu erfahren.

$ npm init

Dadurch wird ein Starterpaket erstellt und eine package.json-Datei für uns hinzugefügt. Hier werden alle zum Erstellen dieser Anwendung erforderlichen Abhängigkeiten erwähnt.

Zum Erstellen einer einfachen React-Anwendung benötigen wir zwei Hauptbibliotheken: React und ReactDOM. Lassen Sie uns sie mit npm als Abhängigkeiten in unsere Anwendung einfügen.

$ npm i react react-dom --save

Als nächstes müssen wir ein Webpack hinzufügen, damit wir unsere App zusammen bündeln können. Nicht nur das Bundle, sondern auch das Hot-Reloading, das mit dem Webpack-Dev-Server möglich ist.

$ npm i webpack webpack-dev-server webpack-cli --save--dev

Hiermit --save--devwird angegeben, dass diese Module nur Entwicklungsabhängigkeiten sind. Da wir jetzt mit React arbeiten, müssen wir berücksichtigen, dass React ES6-Klassen und Importanweisungen verwendet, was möglicherweise nicht alle Browser verstehen können. Um sicherzustellen, dass der Code von allen Browsern gelesen werden kann, benötigen wir ein Tool wie babel, um unseren Code in normalen lesbaren Code für Browser umzuwandeln.

$ npm i babel-core babel-loader @babel/preset-react @babel/preset-env html-webpack-plugin --save-dev

Nun, was soll ich sagen, das war die maximale Anzahl von Installationen, die ich verspreche. Im Fall von Babel haben wir zuerst die Core-Babel-Bibliothek, dann den Loader und schließlich 2 Plugins oder Presets geladen, um speziell mit React und dem gesamten neuen Code ab ES2015 und ES6 zu arbeiten.

Lassen Sie uns fortfahren, Code hinzufügen und die Webpack-Konfiguration starten.

So sollte die Datei package.json nach allen bisherigen Installationen aussehen. Je nachdem, wann Sie diesem Artikel folgen, haben Sie möglicherweise eine andere Versionsnummer.

Der Code

Beginnen wir mit dem Hinzufügen einer webpack.config.js- Datei im Stammverzeichnis unserer Anwendungsstruktur. Fügen Sie den folgenden Code in Ihre Datei webpack.config ein.

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //This property defines where the application starts entry:'./src/index.js',
 //This property defines the file path and the file name which will be used for deploying the bundled file output:{ path: path.join(__dirname, '/dist'), filename: 'bundle.js' },
 //Setup loaders module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] },
// Setup plugin to use a HTML file for serving bundled js files plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ]}

Okay, lassen Sie uns die obigen Zeilen verstehen.

Zunächst muss das Standardpfadmodul auf den Dateispeicherort zugreifen und Änderungen am Dateispeicherort vornehmen.

Als nächstes benötigen wir das HTMLWebpackPlugin, um eine HTML-Datei zu generieren, die zum Bereitstellen gebündelter JavaScript-Dateien verwendet wird. Lesen Sie mehr über HTMLWebpackPlugin, indem Sie auf den Link klicken.

Dann haben wir das export.module-Objekt mit einigen Eigenschaften. Die erste ist die Eintragseigenschaft,which is used to specify which file webpack should start with to get the internal dependency graph created.

module.exports = {
 entry:'./src/index.js'
}

Next up is the output property specifying where the bundled file should be generated and what the name of the bundled file would be. This is done by the output.path and output.filename properties.

module.exports = {
//This property defines the file path and the file name which will be used for deploying the bundled file output:{ path: path.join(__dirname, '/dist'), filename: 'bundle.js' },
}

Next up are the loaders. This is to specify what webpack should do for a specific type for file. Remember that webpack out of box only understands JavaScript and JSON, but if your project has any other language used, this would be the place to specify what to do with that new language.

module.exports = {
//Setup loaders module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] }
}

The information should be specified in an object for each module property, which further has an array of rules. There will be an object for every case. I have also specified to exclude everything in my node_modules folder.

Next up is the plugin property. This is used to extend the capabilities of webpack. Before a plugin can be used in the plugin array inside the module exports object, we need to require the same.

module.exports = {
// Setup plugin to use a HTML file for serving bundled js files plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ]
}

This particular plugin, as explained earlier, will use the specified file in our src folder. It’ll then use that as a template for our HTML file where all the bundled files will be automatically injected. There are a lot of other out of the box plugins that we could use — checkout the official page for more information.

The last thing we need to do is create a .babelrc file to use the babel preset we installed and take care of the ES6 classes and import statements in our code. Add the following lines of code to the .babelrc file.

{ "presets": ["env", "react"]}

And just like that, now babel will be able to use those presets. Okay so enough of the setup — let’s add some React code to see how this works.

React Code

Since the starting point for the application is the index.js file in src folder, let’s start with that. We will start by requiring both React and ReactDOM for our use in this case. Add the below code in your index.js file.

import React from 'react';import ReactDOM from 'react-dom';import App from './Components/App';
ReactDOM.render(, document.getElementById('app'));

So we simply import another file from our components folder, which you will create, and add another file in the folder called App.js. So let’s see what’s inside the App.js file:

import React, { Component } from 'react'
class App extends Component { render() { return ( 

Webpack + React setup

) }}
export default App;

We are almost done. The only thing left now is to enable hot reloading. This means that every time a change is detected, the browser auto reloads the page and has the ability to build and bundle the entire application when the time comes.

We can do this by adding script values in the package.json file. Remove the test property in the scripts object of your package.json file and add these two scripts:

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

You are all set! Go to your terminal, navigate to the root folder, and run npm start. It should start a dev server on your computer and serve the HTML file in your browser. If you make any minor/major changes and save the code, your browser will be automatically refreshed to show the latest set of changes.

Once you think you are ready to get the app bundled, you just need to hit the command, npm build, and webpack will create an optimised bundle in your project folder which can be deployed on any web server.

Conclusion

This is just a small application or use case of webpack and babel, but the applications are limitless. I hope you are excited enough to explore more options and ways of doing things with webpack and babel. Please refer to their official websites to know more and read in depth.

I have created a Github repo with all the code in it, so please refer to it incase of any questions.

ashishcodes4/webpack-react-setup

Setting a react application from scratch without using CLI - ashishcodes4/webpack-react-setupgithub.com

My two cents about webpack? Well, at times you may think that it’s nothing more than a tool, and why should you bother too much for a tool? But trust me when I say this: the initial struggle while learning your way around webpack will save you an enormous number of hours you would otherwise invest developing without webpack.

That’s all for now, hope to be back with yet another interesting article very soon. I hope you have enjoyed reading this one!

In case you face any difficulty or issues while following any of the above mentioned steps/processes, please feel free to get in touch and leave comments.

LinkedIn: //www.linkedin.com/in/ashish-nandan-singh-490987130/

Twitter: //twitter.com/ashishnandansin