วิธีโหลดไฟล์ทั้งหมดในไดเร็กทอรีโดยใช้ webpack โดยไม่ต้องใช้งบ

ฉันมีไฟล์จาวาสคริปต์จำนวนมากที่แบ่งออกเป็น 4 ไดเรกทอรีย่อยในแอปของฉัน ด้วยความฮึดฮัดฉันคว้าทั้งหมดและรวบรวมเป็นไฟล์เดียว ไฟล์เหล่านี้ไม่มีฟังก์ชัน module.exports

ฉันต้องการใช้ webpack และแบ่งออกเป็น 4 ส่วน ฉันไม่ต้องการเข้าไปด้วยตนเองและต้องการไฟล์ทั้งหมดของฉัน

ฉันต้องการสร้างปลั๊กอินที่ในการคอมไพล์จะเดินไปตามแผนผังไดเร็กทอรีจากนั้นคว้าชื่อไฟล์และพา ธ . js ทั้งหมดจากนั้นต้องการไฟล์ทั้งหมดในไดเร็กทอรีย่อยและเพิ่มลงในเอาต์พุต

ฉันต้องการให้ไฟล์ทั้งหมดในแต่ละไดเร็กทอรีรวบรวมเป็นโมดูลที่ฉันต้องการจากไฟล์จุดเริ่มต้นของฉันหรือรวมไว้ในเนื้อหาที่http://webpack.github.io/docs/plugins.htmlกล่าวถึง

เมื่อเพิ่มไฟล์ใหม่ฉันแค่ต้องการวางลงในไดเร็กทอรีที่ถูกต้องและรู้ว่าจะรวมอยู่ด้วย

มีวิธีดำเนินการกับ webpack หรือปลั๊กอินที่มีคนเขียนไว้ให้ทำสิ่งนี้หรือไม่?

นี่คือสิ่งที่ฉันทำเพื่อให้บรรลุสิ่งนี้:

function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('./modules/', true, /\.js$/));

ในไฟล์แอพของฉันฉันได้วางสิ่งที่ต้องการ

require.context(
  "./common", // context folder
  true, // include subdirectories
  /.*/ // RegExp
)("./" + expr + "")

เอื้อเฟื้อโพสต์นี้: https://github.com/webpack/webpack/issues/118

ตอนนี้กำลังเพิ่มไฟล์ทั้งหมดของฉัน ฉันมีตัวโหลดสำหรับ html และ css และดูเหมือนว่าจะใช้งานได้ดี

แผนที่ของไฟล์ทั้งหมดในโฟลเดอร์ล่ะ

// { 
//   './image1.png':  'data:image/png;base64,iVBORw0KGgoAAAANS',
//   './image2.png':  'data:image/png;base64,iVBP7aCASUUASf892',
// }

ทำเช่นนี้:

const allFiles = (ctx => {
    let keys = ctx.keys();
    let values = keys.map(ctx);
    return keys.reduce((o, k, i) => { o[k] = values[i]; return o; }, {});
})(require.context('./path/to/folder', true, /.*/));

ตัวอย่างวิธีรับแผนที่ของรูปภาพทั้งหมดในโฟลเดอร์ปัจจุบัน

const IMAGES_REGEX = /\.(png|gif|ico|jpg|jpeg)$/;

function mapFiles(context) {
  const keys = context.keys();
  const values = keys.map(context);
  return keys.reduce((accumulator, key, index) => ({
    ...accumulator,
    [key]: values[index],
  }), {});
}

const allImages = mapFiles(require.context('./', true, IMAGES_REGEX));

ขออนุโมทนาบุญกับ @splintor (ขอบคุณ)

แต่นี่เป็นเวอร์ชันที่ได้มาของฉันเอง

สิทธิประโยชน์:

• การส่งออกโมดูลใดบ้างที่รวบรวมภายใต้ไฟล์ {module_name: exports_obj}วัตถุ
  • module_nameสร้างจากชื่อไฟล์
  • ... โดยไม่ต้องขยายและแทนที่เครื่องหมายทับด้วยขีดล่าง (ในกรณีของการสแกนไดเรกทอรีย่อย)
• เพิ่มความคิดเห็นเพื่อความสะดวกในการปรับแต่ง
  • กล่าวคือคุณอาจไม่ต้องการรวมไฟล์ในไดเร็กทอรีย่อยหากกล่าวว่าไฟล์เหล่านี้จำเป็นต้องใช้ด้วยตนเองสำหรับโมดูลระดับรูท

แก้ไข:ถ้าเช่นฉันคุณแน่ใจว่าโมดูลของคุณจะไม่ส่งคืนสิ่งอื่นใดนอกจาก (อย่างน้อยในระดับรูท) ออบเจ็กต์จาวาสคริปต์ทั่วไปคุณยังสามารถ "เมานต์" พวกเขาเพื่อจำลองโครงสร้างไดเร็กทอรีดั้งเดิมของพวกเขาได้ (ดูรหัส (เวอร์ชันลึก) )ในตอนท้าย)

รหัส (เวอร์ชันดั้งเดิม):

function requireAll(r) {
    return Object.fromEntries(
        r.keys().map(function(mpath, ...args) {
            const result =  r(mpath, ...args);
            const name = mpath
                .replace(/(?:^[.\/]*\/|\.[^.]+$)/g, '') // Trim
                .replace(/\//g, '_') // Relace '/'s by '_'s
            ;
            return [name, result];
        })
    );
};
const allModules = requireAll(require.context(
    // Any kind of variables cannot be used here
    '@models'  // (Webpack based) path
    , true     // Use subdirectories
    , /\.js$/  // File name pattern
));

ตัวอย่าง:

ผลลัพธ์ตัวอย่างสำหรับในที่สุดconsole.log(allModules);:

{
  main: { title: 'Webpack Express Playground' },
  views_home: {
    greeting: 'Welcome to Something!!',
    title: 'Webpack Express Playground'
  }
}

แผนผังไดเรกทอรี:

models
├── main.js
└── views
    └── home.js

รหัส (รุ่นลึก):

function jsonSet(target, path, value) {
    let current = target;
    path = [...path]; // Detach
    const item = path.pop();
    path.forEach(function(key) {
        (current[key] || (current[key] = {}));
        current = current[key];
    });
    current[item] = value;
    return target;
};
function requireAll(r) {
    const gather = {};
    r.keys().forEach(function(mpath, ...args) {
        const result =  r(mpath, ...args);
        const path = mpath
            .replace(/(?:^[.\/]*\/|\.[^.]+$)/g, '') // Trim
            .split('/')
        ;
        jsonSet(gather, path, result);
    });
    return gather;
};
const models = requireAll(require.context(
    // Any kind of variables cannot be used here
    '@models'  // (Webpack based) path
    , true     // Use subdirectories
    , /\.js$/  // File name pattern
));

ตัวอย่าง:

ผลลัพธ์ของตัวอย่างก่อนหน้าโดยใช้เวอร์ชันนี้:

{
  main: { title: 'Webpack Express Playground' },
  views: {
    home: {
      greeting: 'Welcome to Something!!',
      title: 'Webpack Express Playground'
    }
  }
}

สิ่งนี้ใช้ได้กับฉัน:

function requireAll(r) { r.keys().forEach(r); } 

requireAll(require.context('./js/', true, /\.js$/));

หมายเหตุ: สิ่งนี้อาจต้องการไฟล์. js ใน subdirs ของ. / js/ แบบวนซ้ำ