2
webpack module bundler로 angular2 애플리케이션을 만들고 있습니다. 이제 jpg, gif, png 등과 같은 이미지 파일을로드하기위한 파일 로더를 추가했습니다. 하지만 빌드 명령을 실행하면 이미지 파일이 번들되지 않습니다.webpack을 사용하여 이미지를 묶는 방법은 무엇입니까?
<img src="/asset/img/myImg.png"/>
이처럼 내 HTML 템플릿에서 폴더에서(이미지 로더 설정 만)
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=.+)?$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
내가 포함 한 이미지를 webpack.config.js : 여기 내 구성입니다
내 CSS에 너무 :
#myBackground {
background: background: #344556 url(/assets/img/background.jpg) center/cover;
}
하지만 전체 응용 프로그램을 빌드 할 때 이미지는 webpack config에 지정된 것과 같은 assets 폴더에 저장되지 않습니다.
가장 이상한 점은 글꼴에 동일한 구성이 사용되고 자산 폴더 내에 만들어지는 것입니다. 등 svgs, TTF, WOFF, 같은
@font-face {
font-family: 'robotolight';
src: url("../fonts/roboto-light-webfont.eot");
src: url("../fonts/roboto-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-light-webfont.woff2") format("woff2"), url("../fonts/roboto-light-webfont.woff") format("woff"), url("../fonts/roboto-light-webfont.ttf") format("truetype"), url("../fonts/roboto-light-webfont.svg#robotolight") format("svg");
font-weight: normal;
font-style: normal;
}
이 글꼴의 모든 파일이 자산 폴더에서 찾을 수 있습니다 빌드를 실행 한 후 :이있는 style.css에 글꼴을 포함하여 내 CSS입니다.
누구나 이미지가 assets 폴더에 생성되지 않지만 글꼴 파일은 같은 config/loader로 왜 나에게 말해 줄 수 있습니까? 이러한 고정 자산은 HTML에서 직접 포함 된 경우