webpack을 사용하여 디렉토리의 모든 경로를 가져옵니다.

Question

특정 디렉토리의 각 PNG에 대해 실행해야하는 프런트 엔드 코드가 있습니다. 나는 Webpack을 사용하고 있지만 어떻게 사용하는지 확신 할 수 없습니다.

Webpack은 서버 측만 실행한다는 것을 알고 있지만 괜찮습니다. 내가 뭘 찾고있는 경로의 배열입니다 변수입니다. 나는 많은 png 파일이 있기 때문에 그것을 하드 코딩하고 싶지 않다.

var glob = require("glob") 
var loadFiles = new Promise(funtion(resolve, reject) { 
    CompileTimeCommand(function() { 
    glob("assets/tilesheet_images/*.png", function (er, paths) { 
     if (err) { reject(err) } else { resolve(paths) } 
    }) 
    }) 
}) 
loadFiles.then(function(paths) { 
    // etc 
}) 

문제는,이 CompileTimeCommand가 존재하지 않습니다

이상적으로, 범용의 일종 내가 그 결과로이 같은 뭔가를 자바 스크립트를 보간하는 데 사용할 수있는 시간 명령을 컴파일있다.

require 또는 일종의 일반적인 목적의 컴파일 타임 매크로 시스템으로이 작업을 수행 할 수있는 방법이 있습니까? 이전에 Webpack loader를 작성했지만 단순한 임시 명령에 대한 새로운 패키지를 만들어야하는 것이 과도한 것으로 보입니다.

dir glob을 실행하고 내 프로그램에서 읽는 json 파일에 경로를 저장하는 별도의 스크립트를 만드는 것보다 더 좋은 방법이 있습니까?

Answer 1

런타임에 파일 목록을 가져와야 할 때 실행시 변경 될 수 있다면 백엔드 기술을 사용하여 파일 시스템에 액세스하고 http 호출을 통해 결과를 프런트 엔드에 반환하십시오 예를 들면.
그렇지 않으면 파일이 정적이고 컴파일 타임에 결정된 경우 webpack 구성 파일에서 glob을 사용하고 그 결과를 DefinePlugin에 넣어 일부 변수를 파일 목록으로 바꿀 수 있습니다.