webpack을 사용하여 HTML 파일 포함하기

Question

프로젝트 중 하나에 대해 자체 개발 한 대형 빌드 스크립트를 webpack으로 마이그레이션하려고합니다.

하나의 기능은 /views 디렉토리를 가로 지르고 html 파일의 내용을 기본 index.html 파일로 복사하는 기능입니다. 이것은 KnockoutJS의 템플리트 기능을 모든 파일을 하나의 파일에 넣지 않고도 쉽게 사용할 수있게 해줍니다. 이런 식으로 뭔가가 :

for relative_path, full_path in walk(os.path.join(base, "views")): 
    with open(full_path) as f: 
     index.append("""<script type="text/html" id="{0}">""".format(relative_path)) 
     index.extend(f) 
     index.append("</script>") 

이상적으로, 나는 require('./views')처럼 뭔가를하고 스크립트 태그에 텍스트를 주입하고 파일 경로에 id 설정, <script type="text/html" id="views/foo">...</script> 각 .html 파일을 포함 가질 수 있도록하고 싶습니다. 거의 100 개의 템플릿이 있으므로 개별적으로 require()을 보내지 않으려합니다.

이렇게하려면 html-loader 또는 html-webpack-plugin을 구성 할 수 있습니까? 나 자신의 webpack 플러그인을 작성해야하는지, 아니면 내가 원하는 것을하기 위해 기존 플러그인을 구성 할 수있는 방법이 있는지 궁금하다.

감사합니다.

Answer 1

나는 이것을 require.context과 html loader을 사용하여 수행 할 수 있다고 생각합니다.

function requireAll(requireContext) { 
    return requireContext.keys().map(requireContext); 
} 
// requires and returns html files in the views directory 
var modules = requireAll(require.context("./views", true, /^\.html$/)); 
modules.forEach(function(htmlTemplate){ 
    // code to add each template to document.body 
}