[Laravel Mix] แยก webpack.mix.js เป็นหลายไฟล์

ในบางโปรเจ็กต์เราอาจจะต้องแยก site ภายในโปรเจ็กต์เดียวกันเป็นหลาย ๆ site เช่น หน้าบ้านให้ user ใช้ site นึง และสำหรับ admin ใช้อีก site นึงในโปรเจ็กต์เดียวกัน อาจะเกิดปัญหาว่าต้องเขียน webpack.mix.js หลายร้อยบรรทัดจนลายตา มันอาจจะดีกว่าถ้าสามารถแยกเป็น webpack.mix.front.js และ webpack.mix.admin.js ได้ เพื่อง่ายต่อการจัดการ ซึ่งในบทความนี้เราจะมาสอนวิธีแยกไฟล์กันครับ

สิ่งที่ต้องเตรียม

ต้องโหลด minimist มาใช้สำหรับจัดการ argument ที่เราจะส่งผ่านเข้าไปทาง command line

ลงมือทำกันเลย

สร้างไฟล์ขึ้นมาตาม site ที่เราต้องการ ในตัวอย่างนี้จะขอแบ่งเป็น admin กับ front 2 ไฟล์ รวมถึงต้องมีไฟล์หลักคือ webpack.mix.js 1 ไฟล์ตามนี้นะครับ
ไฟล์ webpack.mix.js เนื้อหามีดังนี้
```
  const { env } = require('minimist')(process.argv.slice(2));//รับ aurgument หลัง -- มา ซึ่งรับแต่ชื่อ env

if (env && env.site) {
    require(`${__dirname}/webpack.mix.${env.site}.js`);
}
  
```
โค้ดตามนี้จะรับค่า env.site มาจาก command line เวลาเราสั่ง yarn prod หรือ yarn dev แล้วตามด้วย --env.site={ชื่อ site ที่เราต้องการ compile} สมมติผมจะสั่งให้ compile ไฟล์ admin ก็จะเขียนดังนี้
```
yarn dev --env.site=admin
  
```

ต่อมาเราก็เขียน config ของไฟล์ตามปกติเลยดังนี้
webpack.mix.admin.js

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/admin-app.js', 'public/admin/js')
   .sass('resources/assets/sass/admin-app.scss', 'public/admin/css');

webpack.mix.front.js

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/front-app.js', 'public/front/js')
   .sass('resources/assets/sass/front-app.scss', 'public/front/css');

เป็นอันจบ อยากจะเพิ่ม site กี่ site ก็ตามสะดวกเลย เวลาสั่งก็แก้ env.site เป็นชื่อ site ที่เราตั้งไปครับ

อ้างอิง: Ability to set a custom webpack.mix.js · Issue #608 · JeffreyWay/laravel-mix · GitHub

ค้นหาบล็อกนี้

Kotenarok