2015-02-06 2 views
10

팀과 저는 현재 AMD + RequireJS에서 CommonJS + Webpack으로 다소 큰 프로젝트를 마이그레이션하고 있습니다. 우리는 Webpack이 제공하는 도구가 마음에 듭니다. CommonJS는 커뮤니티가 지향하는 방향이라고 생각합니다. 당신이 말할 수있는 악 대차에 뛰어 들었습니다.Webpack으로 콧수염 템플릿을로드 중입니다.

webpack을 사용하여 .mustache 템플릿 파일을 자동으로로드하고 묶는 효과적인 방법은 무엇입니까? 현재 우리는 형식으로 하나의 js 파일에 우리의 프로젝트 폴더에있는 모든 .mustache 파일을 번들로 xport를 사용하는 시계 스크립트가 :

var files = {}; 
files['path/to/file'] = '<div>{{content}}</div>'; 
files['path/to/other/file'] = '<span>{{stuff}}</span>'; 
... 

우리는 완전히이 계속 사용 할 수 ... 약, 특히 편리 무엇 현재의 솔루션은 새로운 템플릿을 만들 때 프로젝트의 템플릿을 특별히 참조 할 필요가 없다는 것입니다. 스크립트는 폴더를보고 있기 때문에 사전이 업데이트되고 다른 라이브러리를 사용하여 문자열을 가져 와서 사용 가능한 템플릿 함수로 만들 수 있습니다.

그러면 목표는 무엇입니까? 특별히 프로젝트에 파일을 요구하지 않고도 코드에서 사용할 수있는 우리 폴더의 템플릿에서 템플릿을 가져 오는 방법이 있는지 궁금합니다. 그리고 현재 솔루션은 webpack 외부로 이동합니다. (당연히 여기에 연결할 수있는 방법이 없다면) 짜증나게합니다. 왜냐하면 우리는 2 개의 감시 스크립트를 원하지 않기 때문입니다. loaders을 살펴 봤지만 이것들은 1 대 1 소스 파일 인 것 같습니다. -> 출력 파일 대 1 대 다수가 현재의 솔루션에 대해 좋습니다.

감사합니다.

답변

0

require.context 위에 사용자의 필요에 맞는 것을 만들 수 있다고 생각합니다. 템플릿 디렉토리를 가리키면 해당 템플릿에 액세스 할 수있는 API가 제공됩니다. 이 접근법을 mustache-loader과 결합 할 수 있습니다.