Εισαγωγή στο Webpack: τι είναι και πώς να το χρησιμοποιήσετε

Εισαγωγή

Εντάξει, οπότε υποθέτω ότι έχετε ακούσει για το webpack - γι 'αυτό είστε εδώ, σωστά; Το πραγματικό ερώτημα είναι τι γνωρίζετε γι 'αυτό; Ίσως γνωρίζετε μερικά πράγματα για αυτό, όπως πώς λειτουργεί ή μπορεί να μην έχετε καμία απολύτως ιδέα. Είτε έτσι είτε αλλιώς, μπορώ να σας διαβεβαιώσω ότι μετά την ανάγνωση αυτού του άρθρου, πιθανότατα θα αισθανθείτε αρκετά άνετα με όλη την κατάσταση του πακέτου web .

Εξάλλου - η αναγκαιότητα είναι η μητέρα της εφεύρεσης…

Ένας τέλειος τρόπος για να πείτε γιατί υπάρχει διαδικτυακό πακέτο είναι το παραπάνω απόσπασμα. Αλλά για να το καταλάβουμε καλύτερα, πρέπει να επιστρέψουμε, πολύ πίσω, όταν το JavaScript δεν ήταν το νέο σέξι πράγμα, σε εκείνους τους παλιούς χρόνους, όταν ένας ιστότοπος ήταν μόνο ένα μικρό παλιό καλό παλιό . html, CSS και πιθανώς ένα ή μερικά αρχεία JavaScript σε ορισμένες περιπτώσεις. Αλλά πολύ σύντομα όλα αυτά θα άλλαζαν.

Ποιο ηταν το ΠΡΟΒΛΗΜΑ?

Ολόκληρη η κοινότητα dev συμμετείχε σε μια συνεχή αναζήτηση βελτίωσης της συνολικής εμπειρίας χρήστη και προγραμματιστή σχετικά με τη χρήση και την κατασκευή εφαρμογών javascript / web. Επομένως, είδαμε πολλές νέες βιβλιοθήκες και πλαίσιαεισήχθη.

Μερικά μοτίβα σχεδιασμού εξελίχθηκαν επίσης με την πάροδο του χρόνου για να δώσουν στους προγραμματιστές έναν καλύτερο, πιο ισχυρό αλλά πολύ απλό τρόπο σύνταξης σύνθετων εφαρμογών JavaScript. Οι ιστοχώροι στο παρελθόν δεν ήταν απλώς ένα μικρό πακέτο με περίεργο αριθμό αρχείων σε αυτούς. Δηλώνουν ότι γίνονται ογκώδεις, με την εισαγωγή λειτουργικών μονάδων JavaScript , καθώς η γραφή μικρών κομματιών κώδικα ήταν η νέα τάση. Τελικά όλα αυτά οδήγησαν σε μια κατάσταση όπου είχαμε 4x ή 5x από αρχεία στο συνολικό πακέτο εφαρμογών.

Όχι μόνο το συνολικό μέγεθος της εφαρμογής ήταν μια πρόκληση, αλλά και υπήρχε ένα τεράστιο κενό στο είδος των προγραμματιστών κώδικα που έγραφαν και το είδος των προγραμμάτων περιήγησης κώδικα που θα μπορούσαν να κατανοήσουν. Οι προγραμματιστές έπρεπε να χρησιμοποιήσουν πολύ βοηθητικό κωδικό που ονομάζεται polyfills για να βεβαιωθούν ότι τα προγράμματα περιήγησης ήταν σε θέση να ερμηνεύσουν τον κώδικα στα πακέτα τους.

Για να απαντήσουμε σε αυτά τα ζητήματα, δημιουργήθηκε το webpack. Το Webpack είναι ένα στατικό πρόγραμμα δέσμης στοιχείων.

Πώς ήταν λοιπόν η απάντηση στο Webpack;

Εν συντομία, το Webpack περνά μέσα από το πακέτο σας και δημιουργεί αυτό που ονομάζει ένα γράφημα εξάρτησης που αποτελείται από διάφορες ενότητες τις οποίες ο webapp σας θα απαιτούσε να λειτουργεί όπως αναμενόταν. Στη συνέχεια, ανάλογα με αυτό το γράφημα, δημιουργεί ένα νέο πακέτο που αποτελείται από τον ελάχιστο απαιτούμενο ελάχιστο αριθμό αρχείων, συχνά μόνο ένα αρχείο bundle.js που μπορεί να συνδεθεί εύκολα στο αρχείο html και να χρησιμοποιηθεί για την εφαρμογή.

Στο επόμενο μέρος αυτού του άρθρου θα σας καθοδηγήσω τη διαδικασία βήμα προς βήμα του webpack. Μέχρι το τέλος, ελπίζω να καταλάβετε τα βασικά του Webpack. Ας πάρουμε λοιπόν αυτό το τροχαίο…

Τι χτίζουμε;

Έχετε πιθανώς ακούσει για το ReactJS. Αν γνωρίζετε reactJS, πιθανότατα γνωρίζετε τι είναι η δημιουργία-αντιδρά-εφαρμογή . Για όσους από εσάς δεν έχετε ιδέα τι είναι ένα από αυτά τα δύο πράγματα, το ReactJS είναι μια βιβλιοθήκη διεπαφής χρήστη η οποία είναι πολύ χρήσιμη για τη δημιουργία έξυπνων σύνθετων διεπαφών χρήστη και το create-react-app είναι ένα εργαλείο CLIγια τη ρύθμιση ή την εκκίνηση μιας εγκατάστασης dev boilerplate για την εφαρμογή εφαρμογών React.

Σήμερα θα δημιουργήσουμε μια απλή εφαρμογή React, αλλά χωρίς τη χρήση του CLI create-react-app. Ελπίζω να σας φαίνεται αρκετά διασκεδαστικό. :)

Φάση εγκατάστασης

npm int

Αυτό είναι σωστό, έτσι ξεκινούν σχεδόν όλα τα καλά πράγματα: απλό παλιό npm init. Θα χρησιμοποιώ τον κώδικα VS, αλλά μη διστάσετε να χρησιμοποιήσω οποιονδήποτε επεξεργαστή κώδικα θέλετε να ξεκινήσετε.

Προτού μπορέσετε να κάνετε κάτι από αυτό, σκεφτείτε, βεβαιωθείτε ότι έχετε εγκαταστήσει τοπικά την τελευταία έκδοση nodeJS και την έκδοση npm στον υπολογιστή σας. Κάντε κλικ σε κάθε έναν από αυτούς τους συνδέσμους για να μάθετε περισσότερα σχετικά με τη διαδικασία.

$ npm init

Αυτό θα δημιουργήσει ένα πακέτο εκκίνησης και θα προσθέσει ένα αρχείο package.json για εμάς. Εδώ θα αναφέρονται όλες οι εξαρτήσεις που απαιτούνται για τη δημιουργία αυτής της εφαρμογής.

Τώρα για τη δημιουργία μιας απλής εφαρμογής React, χρειαζόμαστε δύο κύριες βιβλιοθήκες: React και ReactDOM. Ας τους προσθέσουμε ως εξαρτήσεις στην εφαρμογή μας χρησιμοποιώντας npm.

$ npm i react react-dom --save

Στη συνέχεια πρέπει να προσθέσουμε webpack, ώστε να συνδυάσουμε την εφαρμογή μας μαζί. Όχι μόνο το πακέτο, αλλά θα απαιτήσουμε επίσης την επανάληψη φόρτωσης που είναι δυνατή με τη χρήση του διακομιστή webpack

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

The --save--dev is to specify that these modules are just dev dependencies. Now since we are working with React, we must keep in mind that React uses ES6 classes and import statements, something that all the browsers may not be able to understand. To make sure that the code is readable by all browsers, we need a tool like babel to transpile our code to normal readable code for browsers.

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

Well what can I say, that was the maximum number of installs I promise. In the case of babel, we have loaded the core babel library first, then the loader, and finally 2 plugins or presets to work specifically with React and all the new ES2015 and ES6 onwards code.

Moving on, let’s add some code and let’s get the webpack configuration started.

Με αυτόν τον τρόπο το αρχείο package.json πρέπει να φροντίζει όλες τις εγκαταστάσεις μέχρι στιγμής. Μπορεί να έχετε διαφορετικό αριθμό έκδοσης ανάλογα με το πότε ακολουθείτε αυτό το άρθρο.

Ο κώδικας

Ας ξεκινήσουμε προσθέτοντας ένα αρχείο webpack.config.js στη ρίζα της δομής της εφαρμογής μας. Προσθέστε τον ακόλουθο κώδικα στο αρχείο webpack.config.

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' }) ]}

Εντάξει, ας καταλάβουμε τις παραπάνω γραμμές.

Αρχικά ξεκινάμε απαιτώντας την προεπιλεγμένη ενότητα διαδρομής για πρόσβαση στη θέση του αρχείου και πραγματοποιώντας αλλαγές στη θέση του αρχείου.

Στη συνέχεια, απαιτούμε το HTMLWebpackPlugin να δημιουργήσει ένα αρχείο HTML που θα χρησιμοποιηθεί για την εξυπηρέτηση ομαδοποιημένων αρχείων / αρχείων JavaScript. Διαβάστε περισσότερα για το HTMLWebpackPlugin κάνοντας κλικ στο σύνδεσμο.

Στη συνέχεια έχουμε το αντικείμενο export.module με κάποιες ιδιότητες σε αυτές. Το πρώτο είναι η ιδιότητα εισόδου,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

Τα δύο σεντ μου για το webpack; Λοιπόν, μερικές φορές μπορεί να πιστεύετε ότι δεν είναι τίποτα περισσότερο από ένα εργαλείο, και γιατί πρέπει να ασχοληθείτε πάρα πολύ για ένα εργαλείο; Αλλά πιστέψτε με όταν το λέω αυτό: ο αρχικός αγώνας ενώ μαθαίνετε τον τρόπο σας γύρω από το webpack θα σας εξοικονομήσει έναν τεράστιο αριθμό ωρών που διαφορετικά θα επενδύατε να αναπτύξετε χωρίς webpack.

Αυτό είναι όλο προς το παρόν, ελπίζω να επιστρέψω με ένα ακόμη ενδιαφέρον άρθρο πολύ σύντομα. Ελπίζω να σας άρεσε να διαβάζετε αυτό!

Σε περίπτωση που αντιμετωπίσετε οποιαδήποτε δυσκολία ή προβλήματα ενώ ακολουθείτε οποιοδήποτε από τα παραπάνω βήματα / διαδικασίες, μη διστάσετε να επικοινωνήσετε και να αφήσετε σχόλια.

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

Twitter: //twitter.com/ashishnandansin