مقدمة إلى Webpack: ما هي وكيفية استخدامها

المقدمة

حسنًا ، أفترض أنك سمعت عن حزمة الويب - لهذا السبب أنت هنا ، أليس كذلك؟ السؤال الحقيقي هو ماذا تعرف عنه؟ قد تعرف بعض الأشياء عنها ، مثل كيفية عملها ، أو قد لا يكون لديك أي دليل على الإطلاق. في كلتا الحالتين ، يمكنني أن أؤكد لك أنه بعد قراءة هذا المقال ، من المحتمل أن تشعر بالراحة الكافية مع موقف webpack بأكمله .

بعد كل شيء - الضرورة أم الاختراع ...

الاقتباس أعلاه هو أفضل طريقة لمعرفة سبب وجود webpack. لكن لفهم ذلك بشكل أفضل ، نحتاج إلى العودة ، إلى الوراء ، إلى الوقت الذي لم يكن فيه JavaScript هو الشيء المثير الجديد ، في تلك العصور القديمة عندما كان موقع الويب مجرد حزمة صغيرة من القديم الجيد . html و CSS وربما ملف JavaScript واحد أو عدة ملفات في بعض الحالات. لكن سرعان ما سيتغير كل هذا.

ما هي المشكلة؟

شارك مجتمع dev بأكمله في السعي المستمر لتحسين تجربة المستخدم والمطور بشكل عام حول استخدام وبناء تطبيقات جافا سكريبت / الويب. لذلك ، رأينا الكثير من المكتبات والأطر الجديدةأدخلت.

تطورت بعض أنماط التصميم أيضًا بمرور الوقت لمنح المطورين طريقة أفضل وأكثر قوة ولكنها بسيطة جدًا لكتابة تطبيقات JavaScript المعقدة. لم تكن مواقع الويب من قبل مجرد حزمة صغيرة بها عدد فردي من الملفات. صرحوا بأنهم أصبحوا ضخمًا ، مع إدخال وحدات JavaScript ، حيث كانت كتابة أجزاء صغيرة مغلفة من التعليمات البرمجية هي الاتجاه الجديد. في النهاية ، أدى كل هذا إلى موقف كان لدينا فيه ملفات 4x أو 5x في حزمة التطبيق الإجمالية.

لم يكن الحجم الإجمالي للتطبيق يمثل تحديًا فحسب ، بل كانت هناك أيضًا فجوة كبيرة في نوع مطوري الكود الذي يكتبونه ونوع متصفحات الكود التي يمكن أن تفهمها. كان على المطورين استخدام الكثير من التعليمات البرمجية المساعدة التي تسمى polyfills للتأكد من أن المتصفحات قادرة على تفسير الكود في حزمها.

للإجابة على هذه المشكلات ، تم إنشاء حزمة الويب. Webpack عبارة عن مجمّع وحدة ثابتة.

فكيف كان Webpack الجواب؟

باختصار ، يتصفح Webpack الحزمة الخاصة بك وينشئ ما يسميه مخطط التبعية الذي يتكون من وحدات مختلفة قد يتطلبها تطبيق الويب الخاص بك للعمل كما هو متوقع. بعد ذلك ، بناءً على هذا الرسم البياني ، يقوم بإنشاء حزمة جديدة تتكون من الحد الأدنى لعدد الملفات المطلوبة ، غالبًا ما يكون مجرد ملف bundle.js واحد يمكن توصيله بملف html بسهولة واستخدامه للتطبيق.

خلال الجزء التالي من هذه المقالة ، سوف آخذك خلال إعداد حزمة الويب خطوة بخطوة. في نهايته ، أتمنى أن تفهم أساسيات Webpack. لذا فلنبدأ بهذه التدحرج ...

ماذا نبني؟

ربما سمعت عن ReactJS. إذا كنت تعرف responseJS ، فمن المحتمل أنك تعرف ما هو تطبيق create-react-app . بالنسبة لأولئك الذين ليس لديهم أي فكرة عن أي من هذين الأمرين ، فإن ReactJS هي مكتبة واجهة مستخدم مفيدة جدًا في بناء واجهات مستخدم معقدة ذكية ، كما أن إنشاء تطبيق تفاعل هو أداة CLIلإعداد أو تمهيد إعداد مطور معياري لإنشاء تطبيقات React.

سننشئ اليوم تطبيق React بسيطًا ولكن بدون استخدام CLI create-رد فعل التطبيق. أتمنى أن يبدو هذا ممتعًا بما يكفي لك. :)

مرحلة التثبيت

npm int

هذا صحيح ، هذه هي الطريقة التي تبدأ بها كل الأشياء الجيدة تقريبًا: init القديمة البسيطة. سأستخدم VS Code ، لكن لا تتردد في استخدام أي محرر كود تريده لبدء الأمور.

قبل أن تتمكن من القيام بأي من هذا ، فكر ، تأكد من تثبيت أحدث إصدار من nodeJS وإصدار npm محليًا على جهازك. انقر فوق كل من هذه الروابط لمعرفة المزيد عن العملية.

$ npm init

سيؤدي هذا إلى إنشاء حزمة بداية وإضافة ملف package.json لنا. هذا هو المكان الذي سيتم فيه ذكر جميع التبعيات المطلوبة لبناء هذا التطبيق.

الآن لإنشاء تطبيق React بسيط ، نحتاج إلى مكتبتين رئيسيتين: React و ReactDOM. لذلك دعنا نضيفهم كتبعيات في تطبيقنا باستخدام npm.

$ npm i react react-dom --save

بعد ذلك ، نحتاج إلى إضافة حزمة الويب ، حتى نتمكن من تجميع تطبيقنا معًا. ليس فقط الحزمة ، ولكننا سنطلب أيضًا إعادة التحميل السريع وهو أمر ممكن باستخدام خادم webpack dev

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

الغرض من --save--devتحديد أن هذه الوحدات هي مجرد تبعيات للمطورين. الآن بما أننا نعمل مع React ، يجب أن نضع في اعتبارنا أن React تستخدم فئات ES6 وبيانات الاستيراد ، وهو أمر قد لا تتمكن جميع المتصفحات من فهمه. للتأكد من أن الشفرة قابلة للقراءة من قبل جميع المتصفحات ، نحتاج إلى أداة مثل babel لتحويل الكود الخاص بنا إلى كود عادي قابل للقراءة للمتصفحات.

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

حسنًا ، ما الذي يمكنني قوله ، كان هذا هو الحد الأقصى لعدد عمليات التثبيت التي أعدك بها. في حالة babel ، قمنا بتحميل مكتبة babel الأساسية أولاً ، ثم المُحمل ، وأخيرًا مكونين إضافيين أو إعدادات مسبقة للعمل بشكل خاص مع React وجميع الكود ES2015 و ES6 الجديد وما بعده.

المضي قدمًا ، دعنا نضيف بعض الأكواد ودعنا نبدأ تكوين حزمة الويب.

هذه هي الطريقة التي يجب أن يعتني بها ملف 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 مع بعض الخصائص بداخلها. الأول هو خاصية الدخول ،والتي تُستخدم لتحديد حزمة الويب للملف التي يجب أن تبدأ بها لإنشاء الرسم البياني للتبعية الداخلية.

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

التالي هو خاصية الإخراج التي تحدد مكان إنشاء الملف المجمع وما هو اسم الملف المجمع. يتم ذلك عن طريق خصائص output.path و output.filename .

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' },
}

التالي حتى اللوادر. هذا لتحديد ما يجب أن تفعله حزمة الويب لنوع معين من الملفات. تذكر أن حزمة الويب الجاهزة لا تفهم سوى JavaScript و JSON ، ولكن إذا كان مشروعك يستخدم أي لغة أخرى ، فسيكون هذا هو المكان المناسب لتحديد ما يجب فعله بهذه اللغة الجديدة.

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 عددًا هائلاً من الساعات التي كنت ستستثمرها في التطوير بدون حزمة الويب.

هذا كل شيء الآن ، آمل أن أعود بمقال آخر مثير للاهتمام قريبًا جدًا. أتمنى أن تكون قد استمتعت بقراءة هذا!

في حال واجهتك أي صعوبة أو مشاكل أثناء اتباع أي من الخطوات / العمليات المذكورة أعلاه ، فلا تتردد في الاتصال وترك التعليقات.

ينكدين: //www.linkedin.com/in/ashish-nandan-singh-490987130/

تويتر: //twitter.com/ashishnandansin