الصفحة الرئيسية>كود مصدر ASP>فئات أخرى
تنزيل

ملاحظة: لم يعد يتم صيانة هذا المشروع بشكل نشط.

لسوء الحظ، ليس لدي الوقت/الحماس للحفاظ على هذا المشروع في الوقت الحالي. أوصي بتقسيم هذا المشروع أو قراءة مصدره لمعرفة كيفية بنائه.

tris-webpack-boilerplate

إن نموذج حزمة الويب هذا مخصص للمطورين المبتدئين والمتوسطين والمتقدمين الذين يتطلعون إلى إنشاء مواقع ويب ثابتة بسرعة مع تحقيق جميع التحسينات الصحيحة للحصول على نتيجة مثالية في Google Page Speed ​​Insights وGoogle Lighthouse Reports - وهذا تطور لنموذج tris-gulp-boilerplate، الآن مع Webpack 4. Webpack هو المعيار الجديد لتجميع JS والذي لم يكن Gulp قادرًا على القيام به. لحسن الحظ، هل بإمكان Webpack تشغيل المهام وحزمة js؟

الهدف من هذا المشروع/النموذج المعياري هو الوصول إلى الأشخاص التاليين:

  1. المبتدئين ؟ - الذين على الرغم من أنهم يستخدمون Gulp/Webpack/Node/Npm، إلا أنهم لا يزالون بحاجة إلى شرح أكثر شمولاً من المطورين الأكثر دراية. إنهم يريدون أن تسير الأمور، لكنهم يريدون أن يعرفوا كيف ولماذا أيضًا.

  2. محتالو المشاريع الجانبية ?‍♀️ — أولئك الذين لديهم كل الأفكار الرائعة ولكنهم لا يريدون إضاعة الوقت في الإعداد. إنهم بحاجة إلى نشر أفكارهم وتطبيقاتهم ومواقعهم الإلكترونية في المتصفح... بسرعة .

  3. الوسواس القهري ‍♂️ - الأشخاص الذين يحبون الحصول على تلك الدرجات المثالية في تقارير الأداء والتحسينات. الأشخاص الذين تم تنظيمهم رقميًا ويفخرون بمعرفة أن جميع ملفاتهم تم تصغيرها وضغطها وضغطها وجاهزة للشحن!

لا تتردد في تشعب هذا الريبو وإنشاء سير العمل الخاص بك بناءً على هذا القالب! الجميع مختلفون بعض الشيء، أنا أفهم.

الاستخدام

تحتاج إلى git وnode.js على جهاز الكمبيوتر الخاص بك قبل التشغيل.

  1. git clone https://github.com/tr1s/tris-webpack-boilerplate.git your-project-name

  2. cd your-project-name && rm -rf .git

  3. npm install

  4. npm start

أنت جاهز، ابدأ البرمجة ?‍?‍ !

قم بإزالة كل شيء في المجلد src/styles/ و src/index.html و src/index.scss/ إذا كنت ترغب في البدء من جديد بنسبة 100% و/أو إنشاء سير عمل Sass الخاص بك. لقد قمت ببناء بنية المجلد الخاص بي على النمط 7-1.

  1. npm run build عندما تكون جاهزًا لتحميل موقعك على منصة FTP / الاستضافة التي تختارها. سيؤدي هذا إلى إنشاء مجلد dist يحتوي على جميع أصول موقع الويب الخاص بك المُحسّنة والمضغوطة.

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

الميزات / المحتويات

  • tris-webpack-boilerplate

  • الاستخدام

  • الميزات / المحتويات

  • وأوضح الميزات

    • تقسيم تكوين Webpack

    • خادم تطوير حزمة الويب

    • أصول HTML والتصغير

    • لم يتم العثور على صفحة 404

    • SCSS إلى CSS + التحسينات

    • النقل ES6

    • قائمة المتصفحات

    • أصول الصورة + الضغط

    • تحميل الخط + التحميل المسبق

    • ضغط الأصول

    • تنظيف البرنامج المساعد Webpack

    • خرائط المصدر

    • جيل فافيكون

    • غير متصل أولا والتخزين المؤقت

    • تطبيق الويب التقدمي (PWA)

  • مسكتك

  • المساهمة

وأوضح الميزات

تقسيم تكوين Webpack

بدلاً من أن يكون لدينا webpack.config.js واحد كبير، سنقوم بتقسيم بنيات الإنتاج والتطوير لدينا إلى تكوينين جديدين يسمى webpack.dev.js و webpack.prod.js . سيتم إدخال التكوينات التي نريدها في كل من التطوير والإنتاج في تكوين webpack.common.js .

عندما نقوم بتشغيل npm start ، فإنه سيتم تشغيل بناء التطوير استنادًا إلى تكوين webpack.dev.js الذي يحتوي أيضًا على تكوينات webpack.common.js المدمجة. اقرأ المزيد عن هذا في وثائق Webpack.

 /* wenpack.dev.js */const merge = require("webpack-merge");const common = require("./webpack.common.js");/* يدمج webpack.common.js ثم تضيفه الخاص بك اضافية */module.exports = merge(common, {
  الوضع: "التنمية"،
  /* بقية الكود موجود هنا */);

عندما نقوم بتشغيل npm run build ، فإنه سيتم تشغيل بناء الإنتاج استنادًا إلى تكوين webpack.prod.js الذي يحتوي أيضًا على تكوينات webpack.common.js المدمجة.

 /* webpack.prod.js */const merge = require("webpack-merge");const common = require("./webpack.common.js");/* يدمج webpack.common.js ثم تضيفه الخاص بك اضافية */module.exports = merge(common, {
  الوضع: "الإنتاج"،})؛

نريد أن تؤدي عمليات التطوير والإنتاج الخاصة بنا إلى تحقيق نفس النتائج بشكل مرئي في المتصفح. لا ترغب في الانتهاء من البرمجة، وتشغيل الإنشاء، ومن ثم إنشاء موقع ويب مختلف تمامًا مع وجود صور مفقودة على سبيل المثال. لهذا السبب لدينا webpack.common.js للتعامل مع جميع أدوات التحميل وإدارة الأصول. سيكون webpack.dev.js مختلفًا قليلًا مع خريطة المصدر ذات الوزن الخفيف. وأخيرًا، سيتولى webpack.prod.js جميع المراحل النهائية للوصول بموقع الويب الخاص بك إلى مرحلة الإنتاج. وهي ضغط الصور، وضغط الأصول (gzip)، وتصغير الأصول، وإنشاء الرموز المفضلة، والتخزين المؤقت، وإنشاء تجربة أولى دون اتصال بالإنترنت.

سأذهب إلى كل عملية أدناه.

خادم تطوير حزمة الويب

تم تكوين خادم webpack-dev في الحزمة package.json. سيعمل npm start على تشغيل الخادم وفتح مشروعك في المتصفح باستخدام تكوين webpack.dev.js . npm start هو البرنامج النصي الافتراضي لـ npm، لذا لا تحتاج إلى إضافة run إليه. لكن بالنسبة لبرنامج البناء النصي، عليك كتابة npm run build .

 "scripts": { "start": "webpack-dev-server --open --config webpack.dev.js", "build": "webpack --config webpack.prod.js"},

أصول HTML والتصغير

نحن نستخدم محمل html لتصدير HTML كسلسلة وتقليل الإخراج. يتيح لك ذلك استيراد src/index.html داخل src/index.js الخاص بك. يمكننا ببساطة تصغير HTML باستخدام خيار التحميل minimize: true ، ولهذا السبب تركناه في webpack.common.js بدلاً من نقله إلى webpack.prod.js .

 /* webpack.common.js */{
  الاختبار: /.html$/،
  الاستخدام: [{loader: 'html-loader',options: {minim: true}
  }]},
 /* src/index.js */import "./index.html";

نستخدم بعد ذلك html-webpack-plugin لإنشاء ملف index.html جديد يشتمل على جميع عمليات استيراد الأصول الصحيحة.

خيار template: هو المكان الذي تسحب منه HTML المصدر. يمكنك استخدام قالب html الخاص بك، أو قالب المقاود، أو أي من هذه القوالب الأخرى.

inject: الخيار هو المكان الذي ستذهب إليه الأصول الخاصة بك. سيضع Webpack البرنامج webpack-bundle.js المجمع الخاص بك في الجزء السفلي من النص بشكل افتراضي، ولكن هنا قمت بتبديله إلى head لأننا سنستخدم البرنامج النصي script-ext-html-webpack-plugin لإضافة سمة defer إلى البرنامج النصي ووضعه في رأس الموقع. وهذا يساعد في الأداء.

 /* webpack.common.js */const HtmlWebpackPlugin = require('html-webpack-plugin');const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");الإضافات: [
  جديد HtmlWebpackPlugin({title: 'tris-webpack-boilerplate'، اسم الملف: 'index.html'، القالب: './src/index.html'، حقن: 'head'
  })،
  جديد HtmlWebpackPlugin({title: 'tris-404-page'، اسم الملف: '404.html'، القالب: './src/404.html'، حقن: 'head'
  })،
  جديد ScriptExtHtmlWebpackPlugin({defaultAttribute: 'defer'
  })،]،

استمر في إضافة المزيد من المكونات الإضافية new HtmlWebpackPlugin({}) إذا كنت تريد إنشاء موقع ويب متعدد الصفحات. قم بتسمية الصفحة بشكل مناسب title: المفتاح.

لم يتم العثور على صفحة 404

Netlify هي خدمة مجانية رائعة تتيح لك إدارة مواقع الويب الخاصة بك ونشرها. يبحث Netlify تلقائيًا عن 404.html وسيقوم بتحميل تلك الصفحة عندما يحاول شخص ما فتح رابط معطل على موقع الويب الخاص بك. لذلك ليس هناك ما يدعو للقلق.

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

SCSS إلى CSS + التحسينات

من أجل استخدام Sass/SCSS، نحتاج إلى استخدام عدد قليل من أدوات التحميل للحصول على النتائج المرجوة. محمل css، ومحمل postcss، ومحمل sass.

test: يستخدم regex (تعبير عادي) للتحقق من وجود أي ملفات sass أو scss أو css ثم يقوم بتشغيلها من خلال هذه اللوادر الثلاثة، والتي يتم لفها حول mini-css-extract-plugin، والذي يقوم بعد ذلك بإنشاء ملف CSS واحد لك لاستخدامها في الإنتاج.

اقرأ المزيد عن مفهوم اللوادر.

 /* webpack.common.js */{
  الاختبار: /.(sa|sc|c)ss$/،
  الاستخدام: [MiniCssExtractPlugin.loader،{ المُحمل: 'css-loader'، الخيارات: {sourceMap: true }}، { المُحمل: 'postcss-loader'، الخيارات: {sourceMap: true }}، { المُحمل: 'sass-loader '، الخيارات: {sourceMap: true }}
  ]},

الجزء الثاني من تسلسل أداة التحميل، postcss-loader ، حيث ستقوم بتصغير ملف css الخاص بك وإصلاحه تلقائيًا. للقيام بذلك، نقوم بإنشاء postcss.config.js في جذر المشروع ونقوم بتكوينه هكذا...

 /* postcss.config.js */const purgecss = require("@fullhuman/postcss-purgecss");module.exports = {
  المكونات الإضافية: [require("autoprefixer"),require("cssnano")({ الإعداد المسبق: "افتراضي"،})،purgecss({ content: ["./**/*.html"]، الإطارات الرئيسية: صحيح،} )،
  ],};

اقرأ عن autoprefixer وcssnano لتكوينه حسب رغبتك إذا لزم الأمر. بالإضافة إلى ذلك، اقرأ عن postcss بشكل عام لأنها أداة قوية جدًا في ترسانتك.

Purgecss هو مكون إضافي رائع لـ postcss للتخلص من ملفات CSS غير المستخدمة في التعليمات البرمجية الخاصة بك. يقوم Purgecss بتحليل المحتوى الخاص بك وملفات CSS الخاصة بك. ثم يقوم بمطابقة المحددات المستخدمة في ملفاتك مع تلك الموجودة في ملفات المحتوى الخاصة بك. فهو يزيل المحددات غير المستخدمة من ملف CSS الخاص بك، مما ينتج عنه ملفات CSS أصغر.

إنه جاهز للاستخدام بشكل افتراضي، ولكن إذا كنت ترغب في اختباره بصريًا بنفسك، فقم بإلغاء التعليق @import "../node_modules/bulma/bulma"; في ملف index.scss ، ثم قم بتشغيل npm run build وألقِ نظرة على webpack-bundle.css الناتج في مجلد dist الخاص بك. ستلاحظ عدم وجود الكثير من التعليمات البرمجية. ثم قم بإزالة purgecss من postcss.config.js وقم بتشغيل npm run build مرة أخرى، ستلاحظ وجود أكثر من 10000 سطر من التعليمات البرمجية في ملف css الخاص بك قادمة من إطار عمل Bulma. كما ترون، يعد purgecss مثاليًا للتخلص من CSS الذي لا تستخدمه عند استخدام أطر عمل كبيرة مثل Bootstrap وFoundation وBulma وما إلى ذلك!

يعد البرنامج المساعد mini-css-extract هو الخطوة الأخيرة حيث يقوم باستخراج CSS وإعطائه اسمًا قبل إخراجه.

 /* webpack.common.js */const MiniCssExtractPlugin = require("mini-css-extract-plugin"); الإضافات: [
  MiniCssExtractPlugin({filename: 'webpack-bundle.css'،chunkFilename: '[id].css'
  })]،

لذا، بشكل أساسي... سيقوم css-loader بجمع CSS من جميع ملفات css المشار إليها في تطبيقك ووضعها في سلسلة. بعد ذلك، يقوم postcss-loader بالإصلاح التلقائي لأنماطك وتصغيرها، ثم يحولها sass-loader إلى وحدة JS، ثم mini-css-extract-plugin باستخراج CSS من وحدة JS إلى ملف CSS واحد ليقوم متصفح الويب بتحليله.

النقل ES6

قد ترغب في استخدام أحدث ميزات JavaScript وصياغتها، ولكن لا تدعمها جميع المتصفحات حتى الآن. سوف بابل التعامل مع ذلك بالنسبة لنا.

نحن هنا نختبر جميع ملفات js ولكن باستثناء المجلد node_modules ، ثم نقوم بتشغيله من خلال babel-loader باستخدام الإعداد المسبق babel-preset-env.

 /* webpack.common.js */{
  الاختبار: /.js$/،
  استبعاد: /(node_modules)/،
  الاستخدام: {المحمل: 'babel-loader',options: { الإعدادات المسبقة: ['@babel/preset-env']}
  }}

هذه المرة نحن نغامر بالدخول إلى ملف webpack.prod.js . عندما نقوم npm run build ، سيتم تصغير مخرجات js الخاصة بنا وستحتوي على خرائط مصدر كاملة. عند التشغيل في وضع التطوير عبر npm start سيظل لدينا خرائط مصدر أخف ولكن لن يتم تصغير js.

 /* webpack.prod.js */const TerserPlugin = require("terser-webpack-plugin");module.exports = merge(common, {
  الوضع: "الإنتاج"،
  أداة التطوير: "خريطة المصدر"،
  التحسين: {minimizer: [ new TerserPlugin({test: /.js(?.*)?$/i,parallel: true,sourceMap: true, }),],
  },});

اقرأ المزيد حول الخيارات الموجودة في وثائق terser.

قائمة المتصفحات

نريد هنا أن يكون لدينا مكان واحد يمكننا من خلاله إخبار أدوات معينة بالمتصفحات التي نرغب في إضافة دعم لها. نحن نحقق ذلك باستخدام قائمة المتصفحات، وملف .browserslistrc المقابل في جذر المشروع. سوف يلتقط Autoprefixer وbabel-present-env هذا الملف ويطبقان ما يحتاج إليه بناءً على التكوين.

اقرأ عن الأشياء الأخرى التي يمكنك تمريرها إلى .browserslistrc واستخدم browserl.ist لمعرفة المتصفحات التي سيتم استهدافها على وجه التحديد من خلال التكوين الخاص بك. حسنًا، أعتقد أنني قلت المتصفحات مرات كافية الآن؟

 /* .browserslistrc */> 0.25% لم يمت

أصول الصورة + الضغط

نقوم أولاً باختبار ملفات jpeg، وjpg، وpng، وgif، وsvg باستخدام regex (تعبير عادي)، ثم نستخدم أداة تحميل الملفات، التي تحل عمليات الاستيراد والطلب لملف في عنوان url ثم تقوم بإرسال الملف إلى دليل الإخراج. لذا، إذا كنت تستخدم عنصر <img> الذي يلتقط ملفًا من المجلد src/images ، فسيتم استيراده وإصداره إلى مسار الإخراج المحدد images . والذي سينتهي به الأمر إلى src/images إذا npm start (تشغيل dev)، أو npm run build (تشغيل build).

 /* webpack.common.js */{
  الاختبار: /.(jpe?g|png|gif|svg)$/,
  الاستخدام: [{loader: 'file-loader',options: { name: '[name].[ext]',outputPath: 'images/', publicPath: 'images/'},
  }]},

الآن نريد فقط تحسين صورنا على npm run build ، لذلك نقوم بتحرير webpack.prod.js الخاص بنا كما هو موضح أدناه.

مرة أخرى، نقوم باختبار jpeg وjpg وpng وgif وsvg باستخدام regex، ونطبق التحسينات المناسبة. gifsicle هو ضاغط gif غير منقوص، و pngquant هو ضاغط png منقوص، ويمكننا إضافة مكون إضافي يسمى imageminMozjpeg لإجراء ضغط jpg/jpeg مع فقدان. الرهان الآمن هو ضبط الجودة بين 75-90 ويجب أن تحصل على بعض الضغط اللائق دون خسارة الجودة المرئية.

أقترح الالتزام بالضغط غير المنقوص، واقتصاص صورك بالحجم المناسب قبل إضافتها إلى مشروعك. ما عليك سوى إزالة الأقسام الرئيسية imageminMozjpeg وpngquant للقيام بذلك.

يمكنك أيضًا استخدام tinypng لضغط الصور.

 /* webpack.prod.js */const ImageminPlugin = require("imagemin-webpack-plugin").default;const imageminMozjpeg = require("imagemin-mozjpeg");الإضافات: [
  new ImageminPlugin({test: /.(jpe?g|png|gif|svg)$/i,gifsicle: { // تحسين ضاغط gif بدون فقدان المستوى: 9,},pngquant: { // ضاغط png مع فقدان البيانات، قم بالإزالة للإعداد الافتراضي بدون فقدان الجودة: "75"،}، المكونات الإضافية: [ imageminMozjpeg({// ضاغط jpg مفقود، إزالة للجودة الافتراضية بدون فقدان: "75"، })،]،
  }),];

تحميل الخط + التحميل المسبق

نحن هنا نختبر جميع امتدادات الخطوط الشائعة ونستخدم أداة تحميل الملفات مرة أخرى لحل عمليات استيراد الخطوط وإخراجها.

 /* webpack.common.js */{
  اختبار: /.(woff|woff2|ttf|otf)$/,
  الاستخدام: [{loader: 'file-loader',options: { name: '[name].[ext]',outputPath: 'fonts/', publicPath: 'fonts/'},
  }]},

في src/styles/base/_typography.scss نقوم بتحميل الخطوط عبر قاعدة @font-face . يعد Google Webfonts Helper أيضًا أداة رائعة للاستضافة الذاتية لخطوط Google دون أي متاعب. اقرأ المزيد عن قاعدة @font-face في حيل CSS. بالإضافة إلى ذلك، اقرأ عن خاصية عرض الخط أيضًا.

من الأفضل دائمًا تحميل الخطوط مسبقًا. سنحقق ذلك باستخدام المكون الإضافي preload-webpack-plugin، وستحتاج إلى وضعه مباشرة بعد HtmlWebpackPlugin حتى يعمل بشكل صحيح.

 /* webpack.common.js */new PreloadWebpackPlugin({
  rel: "التحميل المسبق"،
  as(entry) {if (/.(woff|woff2|ttf|otf)$/.test(entry)) return 'font';
  },
  القائمة البيضاء للملف: [/.(woff|woff2|ttf|otf)$/]،
  include: 'allAssets'})،

ضغط الأصول

لقد عدنا هنا إلى تكوين webpack.prod.js باستخدام البرنامج المساعد لضغط webpack لضغط ملفات html وcss وjavascript فقط . وذلك لتجنب ضغط ملفات خريطة المصدر التي يتم إنشاؤها.

 /* webpack.prod.js */module.exports = merge(common, {
  الوضع: "الإنتاج"،
  plugins: [new CompressionPlugin({ test: /.(html|css|js)(?.*)?$/i // فقط html/css/js المضغوط، يتخطى ضغط خرائط المصدر وما إلى ذلك})،});

تنظيف البرنامج المساعد Webpack

Clean-webpack-plugin هو مجرد مكون إضافي بسيط لحزمة الويب لإزالة/تنظيف مجلد (مجلدات) البناء الخاص بك قبل إنشاء مجلد جديد. شاهد فحص المجلد الخاص بك أثناء تشغيل npm run build أو npm start . سيتم حذف مجلد dist الحالي الخاص بك (إذا كان لديك مجلدًا تم إنشاؤه مسبقًا) وسيظهر مجلد جديد بعد ذلك مباشرة.

 /* webpack.common.js */const CleanWebpackPlugin = require("clean-webpack-plugin");plugins: [new CleanWebpackPlugin(["dist"])];

خرائط المصدر

يعد استخدام خرائط المصدر أمرًا ضروريًا لتصحيح أخطاء التعليمات البرمجية الخاصة بك في أدوات التطوير.

كما ترون عندما npm start وتفتح أدوات التطوير في Chrome ثم تنقر على وحدة التحكم، سترى أن هناك اثنين من سجلات console.log تأتي من سطر script.js 1 و2. يمكننا رؤية ذلك بسهولة في بنية المجلد لدينا على src/scripts/script.js . إذا لم نستخدم خرائط المصدر، فستُظهر لنا أدوات التطوير أن هذه console.logs تأتي من webpack-bundle.js المجمعة لدينا، وهو أمر غير مفيد للغاية.

حالة مماثلة مع أنماطنا. إذا ألقيت نظرة على عنصر body في أدوات التطوير، سترى بعض الأنماط يتم تطبيقها من ملف _global.scss الخاص بنا، وبعضها من ملف _typography.scss الخاص بنا، وكلاهما موجود في المجلد src/styles/base/ . لن نتمكن من معرفة ذلك إذا تركنا خرائط المصدر. سيُظهر لنا فقط الأنماط الواردة من webpack-bundle.css المجمعة لدينا.

 /* webpack.dev.js */module.exports = merge(common, {
  الوضع: "التنمية"،
  devtool: "inline-source-map"،});
 /* webpack.prod.js */module.exports = merge(common, {
  الوضع: "الإنتاج"،
  أداة التطوير: "خريطة المصدر"،})؛

اقرأ المزيد عن الأنواع المختلفة من خرائط المصدر للعثور على ما يناسب مشروعك بشكل أفضل. بالإضافة إلى ذلك، اقرأ خيار devtool في مستندات webpack.

جيل فافيكون

يعد هذا مكونًا إضافيًا رائعًا يقوم بإنشاء كل رمز ستحتاج إليه استنادًا إلى مصدر صورة واحد. في مجلد src/images/ لدي ملف tris-package.svg الذي أقوم بإدخاله في البرنامج المساعد favicons-webpack.

سيقوم بإنشاء أيقونات لـ Apple وAndroid وChrome وFirefox وTwitter وWindows، سمها ما شئت. سيقوم بإنشاء كل رمز بجميع الأحجام المختلفة واستيرادها مباشرة إلى رأس موقع الويب الخاص بك حيث ينتمون. تم ضبط Twitter وWindows على false ولكن افتراضيًا، لذا قمت بتغييرهما إلى true فقط لتغطية جميع القواعد في حالة حدوث ذلك.

ملحوظة: هذا يزيد بشكل كبير من وقت البناء. وهو أمر مفهوم بالنظر إلى مقدار ما تفعله تحت الغطاء ومقدار الوقت الذي توفره لك على المدى الطويل. لا تتفاجأ إذا استغرق npm run build 20 ثانية أطول من المعتاد.

 /* webpack.prod.js */const FaviconsWebpackPlugin = require("favicons-webpack-plugin");module.exports = merge(common, {
  الوضع: "الإنتاج"،
  المكونات الإضافية: [new FaviconsWebpackPlugin({ logo: "./src/images/favicon.svg"، الرموز: {twitter: true،windows: true، }،})،
  ],});

غير متصل أولا والتخزين المؤقت

نستخدم هنا المكوّن الإضافي غير المتصل بالإنترنت لتخزين جميع أصولنا مؤقتًا عند تحميل الصفحة.

يهدف هذا البرنامج المساعد إلى توفير تجربة غير متصلة بالإنترنت لمشاريع حزمة الويب . ويستخدم ServiceWorker و AppCache كبديل تحت الغطاء. نقوم ببساطة بتضمين هذا المكون الإضافي في webpack.prod.js ، ووقت التشغيل المصاحب في البرنامج النصي للعميل (src/index.js)، وسيصبح مشروعنا جاهزًا دون اتصال عن طريق التخزين المؤقت لجميع (أو بعض) أصول مخرجات حزمة الويب.

ملاحظة: إذا npm run build وتحميل التغييرات إلى الخادم الخاص بك (أو مع ذلك تحافظ على تحديث موقع الويب الخاص بك)، فسيلزم إغلاق موقع الويب الخاص بك وإعادة فتحه قبل أن ترى التغييرات. لا يمكنك فتحه والاستمرار في التحديث، فأنت بحاجة إلى إغلاق علامة التبويب وإعادة فتحها حتى تتعطل ذاكرة التخزين المؤقت.

 /* webpack.prod.js */const OfflinePlugin = require("offline-plugin");module.exports = merge(common, {
  الوضع: "الإنتاج"،
  المكونات الإضافية: [new OfflinePlugin()],});

تطبيق الويب التقدمي (PWA)

تطبيقات الويب التقدمية (PWAs) هي تطبيقات ويب يتم تحميلها مثل صفحات الويب أو مواقع الويب العادية، ولكنها يمكن أن توفر وظائف للمستخدم مثل العمل دون اتصال بالإنترنت، ودفع الإشعارات، والوصول إلى أجهزة الجهاز المتوفرة تقليديًا فقط للتطبيقات الأصلية. تجمع تطبيقات PWA بين مرونة الويب وتجربة التطبيق الأصلي.

الخطوة الأخيرة لجعل هذا النموذج النموذجي PWA هو إضافة بيان تطبيق الويب الإلزامي إلى جذر مشروعك وتكوينه بشكل مناسب!

مسكتك

يواجه Webpack مشكلات عند محاولة تجميع المكتبات الكبيرة مثل jQuery. سينتهي بك الأمر بحدوث أخطاء في وحدة التحكم مثل $ is not defined أو jQuery is not defined . لحل هذه المشكلة، سمحنا لـ Webpack بالتعامل معها باعتبارها خارجية. نقوم بعد ذلك بتحديد المتغيرات وإدراج jQuery عبر CDN. قام معظم الأشخاص بتخزين jQuery مؤقتًا على متصفحهم بغض النظر عن ذلك، لذا لن تكون هذه مشكلة من حيث الأداء. لقد أضفت العناصر externals: config بشكل افتراضي، ولكن سيتعين عليك إضافة jQuery cdn بنفسك إذا كنت تخطط لاستخدامه.

اقرأ المزيد حول العناصر الخارجية في وثائق Webpack.

 /* webpack.common.js */plugins: [],externals: {
  $: "مسج"،
  مسج: "مسج"،
  'نافذة.$': 'مسج',}
 /* src/index.html */<head>
  <scriptdefersrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" </script></head>

المساهمة

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

نأمل أن يكون هذا ساعد! اتبعني على تويتر إذا كنت في ذلك. ؟

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل