Clever Geek Handbook

إعداد Webpack 5 من البداية





تعرف على كيفية استخدام حزمة الويب لإنشاء جافا سكريبت والصور والخطوط والأنماط وكيفية تشغيل



خادم التطوير ، إذا كنت قد استخدمت حزمة الويب 4 من قبل ، فإليك بعض الاختلافات عن الإصدار 5:



  • يبدو الأمر "webpack-dev-server" الآن مثل "webpack-serve"
  • لم يعد التثبيت المنفصل لمحمل الملفات ومحمل المواد الخام ومحمل url مطلوبًا ، يمكنك استخدام وحدات الأصول المدمجة
  • لم يعد Node.js polyfills مدعومًا ، لذا إذا تلقيت ، على سبيل المثال ، خطأ في البث ، فأنت بحاجة إلى إضافة حزمة "stream-browserify" كعنصر تبعية و {stream: "stream-browserify"} كاسم مستعار في إعدادات حزمة الويب الخاصة بك


ما هي حزمة الويب؟



بالنسبة للجزء الأكبر ، لم تعد تتم كتابة المواقع بتنسيق HTML خالص مع القليل من JavaScript - غالبًا ما يتم إنشاؤها باستخدام JavaScript فقط. لذلك ، يصبح من الضروري إنشاء الشفرة وتصغيرها ونقلها. هذا هو المكان الذي يكون فيه webpack مفيدًا.



Webpack هو منشئ وحدة. يتم استخدامه لحزم الكود ليستخدمه المتصفح. يتيح لك الاستفادة من أحدث ميزات JavaScript مع Babel ، أو استخدام TypeScript وتجميعها في التعليمات البرمجية المصغرة عبر المتصفح. كما يسمح لك باستيراد موارد ثابتة إلى JavaScript.



بالنسبة للمطورين ، توفر حزمة الويب أيضًا خادم تطوير يمكنه تحديث الوحدات النمطية والأنماط بسرعة عند حفظ الملف. تستخدم أدوات سطر الأوامر مثل "vue create" و "response-create-app" حزمة الويب خلف الكواليس ، ولكن يمكنك بسهولة إنشاء إعداد webpack الخاص بك لهذه الأطر.



يمكن لـ Webpack القيام بالعديد من الأشياء الأخرى أيضًا ، ولكن هذه المقالة ستغطي أساسيات إعدادها واستخدامها.



التركيب



قم بإنشاء دليل مشروع وقم بتهيئته: 



mkdir webpack-tutorial
cd !$
// 
cd webpack-tutorial
yarn init -yp  //     "package.json"
// 
npm init -y


قم بتثبيت webpack و webpack-cli كاعتمادات للتطوير: 



yarn add -D webpack webpack-cli
// 
npm i -D webpack webpack-cli




قم بإنشاء دليل "src" لتخزين ملفات التطبيق. سأبدأ بإنشاء ملف "index.js" بسيط: 



console.log(" !")


رائع ، لدينا مشروع Node.js مع تثبيت الحزم الرئيسية وملف "index.js". لنبدأ في تكوين حزمة الويب.



الإعداد الأساسي



لنبدأ في تكوين المجمع. قم بإنشاء ملف "webpack.config.js" في الدليل الجذر للمشروع.



نقطة الدخول


بادئ ذي بدء ، تحتاج إلى تحديد نقطة دخول التطبيق ، أي ما هي الملفات التي ستجمعها حزمة الويب. في المثال أعلاه ، نحدد نقطة الإدخال على أنها "src / index.js": 



// webpack.config.js
const path = require('path')

module.exports = {
    entry: {
        main: path.resolve(__dirname, './src/index.js'),
    },
}


نقطة الخروج


نقطة الخروج هي الدليل حيث يتم وضع الملفات التي تم تجميعها بواسطة حزمة الويب. اضبط نقطة الخروج على "dist". تطابق البادئة "[name]" اسم الملف في src: 



// webpack.config.js
module.exports = {
    // ...

    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.js',
    },
}


الحد الأدنى من الإعداد لبناء المشروع جاهز. أضف النص البرمجي "build" إلى ملف "package.json" الذي يقوم بتشغيل الأمر "webpack": 



// package.json
"scripts": {
    "build": "webpack"
}


قم بتشغيل حزمة الويب: 



yarn build
// 
npm run build



asset main.bundle.js 19 bytes [emitted] [minimized] (name: main)
./src/index.js 18 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 152 mss


يتم إنشاء ملف "index.bundle.js" في دليل "dist". لم يتغير الملف ، لكننا قمنا ببناء المشروع بنجاح.



الإضافات



واجهة البرنامج المساعد تجعل webpack مرنًا للغاية. يتم استخدام المكونات الإضافية بواسطة حزمة الويب نفسها وإضافات الجهات الخارجية. يتم استخدام بعض المكونات الإضافية في كل مشروع تقريبًا.



البرنامج المساعد على أساس قالب HTML


لدينا مجموعة جاهزة ، لكنها غير مجدية بدون ترميز ، والتي ستحمّل التجميع كبرنامج نصي. نظرًا لأننا نريد إنشاء ملف HTML هذا تلقائيًا ، فنحن نستخدم المكون الإضافي html-webpack.





قم بتثبيت البرنامج المساعد: 



yarn add -D html-webpack-plugin


أنشئ ملف "template.html" في دليل "src". يمكننا إضافة متغيرات ومعلومات أخرى إلى القالب. أضف المتغير "title" ، وإلا سيبدو القالب كملف HTML عادي مع حاوية بالمعرف "root": 



<!-- src/template.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>


أضف خاصية "plugins" إلى إعدادات webpack ، حيث نحدد المكون الإضافي واسم ملف الإخراج (index.html) والقالب: 



// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // ...

    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack Boilerplate',
            template: path.resolve(__dirname, './src/template.html'), // 
            filename: 'index.html', //   
        }),
    ],
}


نبدأ التجميع. يحتوي دليل "dist" الآن على ملف "index.html" مع البرنامج النصي المضمن فيه. رائع! إذا فتحت هذا الملف في متصفح ، فسترى الرسالة "يا له من اهتمام!" في وحدة التحكم.



دعنا نضيف بعض المحتوى إلى DOM. دعنا نغير محتوى ملف "index.js" ونعيد تشغيل التجميع. 



// index.js
//   
const heading = document.createElement('h1')
heading.textContent = ' !'

//    DOM
const root = document.querySelector('#root')
root.append(heading)


انتقل إلى دليل "dist" وابدأ تشغيل الخادم (لهذا تحتاج إلى تثبيت خادم http عالميًا : إضافة خادم http عالمي أو إضافة خادم http npm i -g http). 



http-server


في علامة تبويب المتصفح التي تفتح ، سترى عنوانًا يقول "كم هو مثير للاهتمام!" لاحظ أيضًا تقليل حجم الملف.



تنظيف


قم بتثبيت البرنامج المساعد clean-webpack ، الذي ينظف دليل "dist" في كل مرة يتم فيها إنشاء المشروع. يتيح لك ذلك حذف الملفات القديمة التي لم تعد مطلوبة تلقائيًا. 





// webpack.config.js
const HtmlWebpackPlugin = require('html=webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    // ...

    plugins: [
        // ...
        new CleanWebpackPlugin(),
    ],
}


الوحدات واللوادر



تستخدم حزمة الويب أدوات تحميل لتحليل الملفات المحملة بواسطة الوحدات النمطية . يمكن أن تكون هذه ملفات JavaScript وموارد ثابتة مثل الصور أو الأنماط ومجمعات مثل TypeScript و Babel. يحتوي Webpack 5 على العديد من أدوات تحميل الموارد المضمنة.



يحتوي مشروعنا على ملف HTML يقوم بتحميل بعض البرامج النصية ، لكنه لا يفعل شيئًا آخر. دعونا نفكر فيما نريده من الجامع؟



  • قم بتجميع أحدث ميزات JavaScript في رمز متوافق مع جميع المتصفحات أو معظمها
  • استيراد الأنماط وتحويل SCSS إلى CSS
  • استيراد الصور والخطوط
  • إعداد React أو Vue (اختياري)


أولاً ، لنقم بإعداد Babel لترجمة JavaScript.



بابل (جافا سكريبت)


Babel هي أداة لتمكين JavaScript في المستقبل اليوم.



سنقوم بتعريف قاعدة مفادها أن جميع ملفات js في المشروع (باستثناء الملفات الموجودة في دليل node_modules) سيتم نقلها باستخدام babel-loader. يتطلب Babel العديد من التبعيات للعمل:



  • babel-loader - نقل الملفات باستخدام Babel و webpack
  • @ babel / core - تحويل ES2015 + إلى JavaScript متوافق مع الإصدارات السابقة
  • @ babel / preset-env - إعدادات Babel الافتراضية المسبقة المفيدة
  • @ babel / plugin-offer-class-properties - مثال على تكوين Babel المخصص (تعيين خصائص المثيل في نص الفصل ، وليس في الباني الخاص به)


yarn add -D babel-loader @babel/core @babel/preset-env @babel/babel-plugin-proposal-class-properties



// webpack.config.js
module.exports = {
    // ...

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


إذا كنت تقوم بإعداد مشروع TypeScript ، فيجب عليك استخدام مُحمل typecript بدلاً من babel-loader لجميع ملفات JavaScript التي تحتاج إلى الترجمة. أنت تتحقق من الملفات ذات الامتداد "ts" وتستخدم أداة تحميل ts.



لذلك تم إعداد Babel ، لكن المكون الإضافي ليس موجودًا بعد. يمكنك التحقق من ذلك عن طريق إضافة الكود التالي إلى أعلى index.js: 



// index.js
//     
class Game {
    name = 'Violin Charades'
}
const myGame = new Game()

//  
const p = document.createElement('p')
p.textContent = `I like ${myGame.game}.`

//   
const heading = document.createElement('h1')
heading.textContent = ' !'

//      DOM
const root = document.querySelector('#root')
root.append(heading, p)



ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/you/webpack-tutorial/src/index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (3:8):

  1 | // Create a class property without a constructor
  2 | class Game {
> 3 |   name = 'Violin Charades'
    |        ^
  4 | }


لإصلاح ذلك ، أنشئ ملف ".babelrc" في جذر المشروع: 



// .babelrc
{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}


نبدأ البناء مع بناء الغزل. كل شيء يعمل الآن.



الصور


نريد استيراد الصور إلى ملف JavaScript ، لكن JavaScript لا يمكنه القيام بذلك. للتحقق من ذلك ، قم بإنشاء دليل "src / images" ، ضع صورة هناك وحاول استيرادها في الملف "index.js": 



// index.js
import example from './images/example.png'

// ...


عند بدء البناء ، سيتم طرح استثناء: 



ERROR in ./src/images/example.png 1:0
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders


كما ذكرنا سابقًا ، تحتوي حزمة الويب على بعض أدوات التنزيل المضمنة للتعامل مع الملفات الثابتة. بالنسبة للصور ، استخدم نوع "الأصول / الموارد". يرجى ملاحظة أننا نتحدث عن النوع (النوع) وليس عن اللودر (اللودر): 



// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            // 
            {
                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
                type: 'asset/resource',
            },
        ],
    },
}


يظهر ملف جديد في دليل "dist".



الخطوط والبيانات المضمنة الأخرى


تحتوي حزمة الويب أيضًا على وحدة نمطية مدمجة للتعامل مع بعض البيانات المضمنة مثل الخطوط و SVG. للقيام بذلك ، يكفي تحديد نوع "الأصل / مضمنة": 



// index.js
import example from './images/example.svg'

// ...



// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            //   SVG
            {
                test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
                type: 'asset/inline',
            },
        ],
    },
}


الأنماط


يعد استخدام محمل الأنماط شرطًا أساسيًا لاستخدام سلاسل مثل "import" file.css "في البرنامج النصي الخاص بك.



كثير من الناس استخدام CSS-في-JS ، مكونات نصب، وغيرها من الأدوات التي تسمح جافا سكريبت لأسلوب.



في بعض الأحيان يمكننا قصر أنفسنا على تحميل ملف CSS واحد. لكن ربما تريد استخدام PostCSS ، الذي يسمح بأحدث إمكانيات CSS في المتصفح. أو هل تريد استخدام معالج Sass المسبق .



أريد استخدام الثلاثة - كتابة التعليمات البرمجية في Sass ، ومعالجتها باستخدام PostCSS ، ثم التحويل البرمجي إلى CSS. 





yarn add -D sass-loader postcss-loader css-loader style-loader postcss-preset-env node-sass


كما هو الحال مع Babel ، تتطلب PostCSS ملف تكوين منفصل: 



// postcss.config.js
module.exports = {
    plugins: {
        'post-css-preset-env': {
            browsers: 'last 2 versions',
        },
    },
}


لاختبار وظائف الأدوات المسماة ، فلنقم بإنشاء ملف "src / styles / main.scss" يحتوي على متغيرات Sass ومثال لاستخدام PostCSS (lch): 



// src/styles/main.css
$font-size: 1rem;
$font-color: lch(53 105 40);

html {
    font-size: $font-size;
    color: $font-color;
}


نستورد هذا الملف إلى index.js ونضيف 4 أدوات تحميل. يتم استخدام أدوات التحميل بواسطة webpack من اليمين إلى اليسار ، لذا يجب أن يكون آخرها هو sass-loader ، ثم PostCSS ، ثم CSS ، وأخيراً مُحمل النمط ، الذي يطبق الأنماط المترجمة على عناصر DOM: 



// index.js
import './styles/main.css'

// ...



// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            // CSS, PostCSS, Sass
            {
                test: /\.(scss|css)$/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
            },
        ],
    },
}


بمجرد الإنشاء ، ستلاحظ أن Sass و PostCSS قد طبقا على DOM.



يرجى ملاحظة أننا قمنا بتعيين التفضيلات لوضع التطوير. للإنتاج ، استخدم MiniCssExtractPlugin بدلاً من محمل النمط ، الذي يصدر CSS مصغرًا.



تطور ال



يمكن أن تكون كتابة بناء الغزل (بناء تشغيل npm) في كل مرة لإعادة بناء المشروع مملة. كلما كان المشروع أكبر ، كلما طال بناؤه. لذلك ، يجب أن يكون لديك ملفان لتهيئة حزمة الويب:



  • إعدادات الإنتاج ، بما في ذلك التصغير والتحسين وإزالة جميع خرائط الموارد (خرائط المصدر)
  • إعدادات التطوير بما في ذلك بدء الخادم والتحديث عند كل تغيير وخرائط الموارد


بدلاً من إنشاء دليل "dist" ، يمكن أن يتوقع وضع التطوير تخزين المعلومات التي تحتاجها في الذاكرة.



للقيام بذلك ، تحتاج إلى تثبيت webpack-dev-server. 





yarn add -D webpack-dev-server


لشرح كيفية استخدام الخادم للتطوير ، يمكننا تحديد الإعدادات المناسبة في ملف "webpack.config.js". من الناحية العملية ، من الأفضل أن يكون لديك ملفان للتهيئة ، أحدهما مع الوضع: الإنتاج والآخر مع الوضع: التطوير. في برنامج webpack 5 المعياري المُعد خصيصًا لك ، أستخدم webpack-merge للحصول على الإعدادات الأساسية في ملف واحد ، والمتطلبات الخاصة موجودة في ملفي "webpack.prod.js" و "webpack.dev.js". 



// webpack.config.js
const webpack = require('webpack')

module.exports = {
    // ...
    mode: 'development',
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, './dist'),
        open: true,
        compress: true,
        hot: true,
        port: 8080,
    },
    plugins: [
        // ...
        //      
        new webpack.HotModuleReplacement(),
    ],
}


لقد أضفنا الوضع: التطوير وخاصية "devServer". تحتوي هذه الخاصية على العديد من الإعدادات القياسية - رقم المنفذ (8080) ، وفتح المتصفح تلقائيًا ، واستخدام استبدال الوحدة الساخنة ، الأمر الذي يتطلب webpack.HotModuleReplacement (). سيسمح ذلك للوحدات النمطية بالتحديث دون إعادة تحميل صفحة كاملة ، أي إذا تغيرت الأنماط الفردية ، تم تحديثها فقط ، فلن تحتاج إلى إعادة تحميل JavaScript ، مما يؤدي إلى تسريع عملية التطوير بشكل كبير.



لبدء الخادم ، استخدم الأمر "webpack serve": 



// package.json
"scripts": {
    "start": "webpack serve"
}



yarn start


بعد تشغيل هذا الأمر ، سيفتح المتصفح على localhost: 8080. الآن يمكنك تعديل Sass و JavaScript وسيتم تحديثهما بسرعة.



خاتمة



آمل أن يساعدك هذا المقال في البدء في استخدام حزمة الويب. لتسهيل حل مهامك اليومية ، قمت بتطوير webpack 5 boilerplate باستخدام Babel و Sass و PostCss وتحسين الإنتاج وخادم للتطوير. بأخذها كأساس ، يمكنك بسهولة تكوين حزمة الويب الخاصة بك للعمل مع React أو Vue أو TypeScript.


More articles:


All Articles