webpack과 함께 템플릿의 이미지 사용

Question

안녕하세요 저는 Webpack이 템플릿 (콧수염 또는 핸들 바)을 올바르게 처리하도록 설정하려고합니다. 한 가지 예외는 있지만 템플릿의 img src atributes는 파일 로더에 의해 처리되지 않습니다. 아마도 워크 플로우에 대한 근본적인 것을 이해하지 못했지만 CSS 파일에서 해결 된 방식으로 작업하고 싶습니다. 내가 제대로 #img1에 IMG를 삽입 할 수 있습니다

내가 JS에서 템플릿을로드

<div style="border: solid 2px blue;"> 
<h2>Template fragment</h2> 
<p>{{text}}</p> 
<img id="img1" src="{{img}}" alt=""> 
<img id="img2" src="../img/btn_bubble.png" alt=""> 

:

loaders: [ 
     { 
      test: /\.js/, 
      loader: 'babel', 
      include: [__dirname + '/src', __dirname + '/tests'], 
      exclude: /node_modules/, 
      query: { 
       plugins: ['transform-runtime'], 
       presets: ['es2015'] 
       //presets: ['es2015-native-modules'] 
      } 
     }, 
     { 
      test: /\.scss/, 
      loader: 'style!css!postcss-loader!sass', 
      // Or 
      //loaders: ['style', 'css', 'sass'], 
     }, 
     { 
      test: /\.html/, 
      loader: 'html', 
     }, 
     { 
      test: /\.modernizrrc$/, 
      loader: "modernizr" 
     }, 
     { 
      test: /\.(jpe?g|png|gif|svg)$/i, 
      loader:'file-loader' 
     }, 
     { 
      test: /\.mustache$/i, 
      loader:'handlebars-loader' 
     }, 
    ], 

이 다음은 샘플 템플릿입니다 :

여기 로더에 관한 내 웹팩 설정입니다 그러나 #img2은 영향을받지 않고 포함 된 후 분명히 작동하지 않습니다. 이 템플릿 로더 패키지에 따라 같은

편집

보인다. 어떤 사람들은 그렇지 않은 이미지를 관리 할 수 ​​있습니다. 예 : Handlebars를 사용하면 핸들 막대 - 템플리트 - 로더 캔 및 핸들 바 - 로더가 아닌 것처럼 보입니다. 그래도 주제가 끝나면 다른 사람들에 대해 알지 못합니다.

Answer 1

(슬프게도) 올바른 것으로 보였으므로 편집에 대한 답변을 승격시킵니다.

일반적인 Webpack 수준의 대답은없는 것 같아서 문제의 템플릿 로더 패키지에 따라 다릅니다. 어떤 사람들은 그렇지 않은 이미지를 관리 할 수 ​​있습니다. 템플릿과 이미지를 처리하기 위해 로더를 연결하는 것이 쉽지만 간단하지는 않습니다. 입력과 출력은 호환되지 않는 경향이 있습니다.

예를 들어 작업을 해결하기 위해 Mustache에서 Handlebars로 전환해야했지만 콧수염이 많은 부하들도 이미지로드 작업을하고있는 것으로 보입니다.