require 문없이 웹팩을 사용하여 디렉토리의 모든 파일을로드하는 방법

require 문없이 웹팩을 사용하여 디렉토리의 모든 파일을로드하는 방법

---

내 앱에 많은 양의 자바 스크립트 파일이 4 개의 하위 디렉토리로 분할되어 있습니다. grunt에서 나는 그것들을 모두 잡고 하나의 파일로 컴파일합니다. 이러한 파일에는 module.exports 기능이 없습니다.

webpack을 사용하여 4 부분으로 나누고 싶습니다. 수동으로 들어가서 모든 파일을 요구하고 싶지 않습니다.

컴파일시 디렉토리 트리를 탐색 한 다음 모든 .js 파일 이름과 경로를 가져온 다음 하위 디렉토리의 모든 파일을 요구하고 출력에 추가하는 플러그인을 만들고 싶습니다.

각 디렉토리의 모든 파일을 진입 점 파일에서 요구할 수있는 모듈로 컴파일하거나 http://webpack.github.io/docs/plugins.html에서 언급 하는 자산에 포함시키고 싶습니다 .

새 파일을 추가 할 때 파일을 올바른 디렉토리에 놓고 포함 할 것인지 알고 싶습니다.

웹팩이나 누군가가이 작업을 위해 작성한 플러그인으로이 작업을 수행하는 방법이 있습니까?

---

이것이 내가 이것을 달성하기 위해 한 일입니다.

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));

---

이것은 나를 위해 작동합니다.

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

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

참고 : ./js/의 하위 디렉터리에있는 .js 파일이 재귀 적으로 필요할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/29421409/how-to-load-all-files-in-a-directory-using-webpack-without-require-statements