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

بداية يجب أن تثبتي الحزمتين 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 بشكل فعال