استخدام حزمة webpack مع مشروع PHP و JS

عبد النور محمد · 5 سبتمبر 2021

لدي مشروع PHP حالي مع jquery و bootstrap ، ولا يستخدم أي إطار عمل للواجهة الأمامية.

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

صادفت برامج webpack التعليمية وحصلت على تثبيتها وتثبيتها على خادم dev الخاص بها ، ولكن المشكلة هي أنني لست قادرًا على فهم كيفية تحويل جميع نصوص js وروابط css الحالية في المشروع (حيث لدي الكثير من مكتبات jquery و CSS المستخدمة لتوفير ميزات متعددة في المشروع) لاستخدام حزمة الويب.

هل يجب علي إعادة كتابة جميع ملفات JS و CSS الخاصة بي بطريقة تناسب webpack ؟

بالإضافة إلى ذلك ، لا يمكنني تشغيل تطبيق php الحالي الخاص بي على webpack dev-server ، فهل من المفترض أن يعمل هناك في المقام الأول؟

لقد قمت بإنشاء ملف test index.js واستخدمت تكوين حزمة الويب التالية:

var path = require('path');
var webpack = require('webpack');

module.exports =
{
    entry: [
        './public/js/index.js',
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080'
    ],
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        path: path.join(__dirname, "public/dist/js"),
        publicPath : "http://localhost:8080/my_proj/public/dist/js",
        filename: "bundle.js"
    }

};

<script type="text/javascript" src="public/dist/js/bundle.js"></script>
<script type="text/javascript" src="public/js/jquery.min.js"></script>
<script type="text/javascript" src="public/js/jquery.migrate.js"></script>
<script type="text/javascript" src="public/js/jquery.bxslider.min.js"></script>
<script type="text/javascript" src="public/js/jquery.appear.js"></script>
<script type="text/javascript" src="public/js/jquery.countTo.js"></script>
<script type="text/javascript" src="public/js/bootstrap.js"></script>

محمد أبو عواد · 5 سبتمبر 2021

بداية يجب أن تثبتي الحزمتين webpack و webpack-cli من خلال الأمر التالي

npm install --save-dev webpack webpack-cli

ثم يجب ان تقومي باشناء مجلد البناء بداخل مجلد المشروع , ثم تنشئين فيه الملفات التالية

config.base.js 
config.production.js
config.development.js

بالطبع سوف تكون فارغة وسوف نملأها,لكن أولا ، سنحتاج إلى تثبيت webpack-merge من خلال الأمر التالي

npm install --save-dev webpack-merge

تسمح لنا هذه الحزمة بدمج التكوينات معا, الآن لنظبط الملف config.base.js

module.exports = {
  
}

من الواضح أن الملف يقوم فقط بتصدير كائن فارغ في الوقت الحالي ، لكننا سنحتاج إلى ذلك للخطوات التالية , ضع هذا الكود في الملف config.production.js

const merge = require('webpack-merge')

module.exports = merge(require('./config.base.js'), {
  mode: 'production'

})

ونفس الكود تقريبا في الملف config.development.js

const merge = require('webpack-merge')

module.exports = merge(require('./config.base.js'), {
  mode: 'development',
  watch: true

})

الآن لتشغيل العملية من خلال الأمر التالي

npx webpack --config build/config.development.js

قم بإنشاء ملف جديد ليكن اسمه paths.js في مجلد البناء الذي أنشأته سابقا وجعل وظيفته تصدير بعض المسارات التي نريد استخدامها لاحقا:

const path = require('path')
module.exports = {
  SRC: path.resolve(__dirname, '..', 'public'),
  DIST: path.resolve(__dirname, '..', 'public', 'dist'),
  ASSETS: '/dist'
}

والآن نفذي الأمر التالي

npx webpack --config build/config.development.js

في ملف package.json أضيفي الكود التالي

{
  "scripts": {
    "dev": "webpack --config build/config.development.js",
    "prod": "webpack --config build/config.production.js"
  }
}

يمكنك الآن تشغيل المشروع باستخدام الاوامر npm run dev و npm run prod , الآن ضعي الكود التالي في config.base.js

const path = require('path')
const { SRC, DIST, ASSETS } = require('./paths')

module.exports = {
  entry: {
    scripts: path.resolve(SRC, 'js', 'index.js')
  },
  output: {
    // Put all the bundled stuff in your dist folder
    path: DIST,

    // Our single entry point from above will be named "scripts.js"
    filename: '[name].js',

    // The output path as seen from the domain we're visiting in the browser
    publicPath: ASSETS
  }
}

الآن قومي بإنشاء ملف JavaScript ويجب أن يكون في المجلد src , لنقم بإنشاء هذا الملف بالمحتوى التالي:

import './jquery.min.js'
import './jquery.migrate.js'
import './jquery.bxslider.min.js'
import './jquery.appear.js'
import './jquery.countTo.js'
import './bootstrap.js'

كما ترى ، يقوم index.js فقط باستيراد جميع الملفات التي تريد استخدامها. الآن نفذي الامر

npm run prod

هكذا تكوني قد حصلتي على إعدادات webpack بشكل فعال

استخدام حزمة webpack مع مشروع PHP و JS

السؤال

عبد النور محمد

1 جواب على هذا السؤال

Recommended Posts

محمد أبو عواد

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية