src 디렉토리 안에 img 디렉토리를 생성하고 간단한 이미지를 준비한다
css.png는 css의 background로 로딩하고 image.png는 html에서 img 태그로 로딩하려고 한다
package.json의 내용은 위와 같다
webpack_image 디렉토리에서 "npm install --dev" 명령를 입력하여 모듈을 설치한다
style.css, app.js, index.html 파일이다
style.css에서 body에 background 속성으로 img 디렉토리의 css.png파일을 불러왔으며
index.html에서 img 태그에 경로명을 그래도 적지 않고 require를 사용하여 이미지의 경로를 지정하여 준다
webpack.config.js파일이다
여기서 중요한 부분은 이미지를 로딩하기 위하여 file-loader와 image-webpack-loader를 사용 해야한다
test에서 /\.(jpe?g|png|gif|svg)$/는 해당 이미지들에 대한 정규표현식이며
file-loader?name=img/[name].[ext]?[hash]는 file-loader를 사용하는데 로드한 파일은 output 옵션의 path를 기준으로 img 디렉토리에 생성된다
webpack_image 디렉토리에서 webpack으로 번들링 한다
결과는 위와 같이 dist 디렉토리에 생성된다
h1 태그의 WEBPACK!!은 css에 의해서 가운데 정렬과 빨간색으로 나타났다
CSS 이미지는 css의 background 속성으로 로드 되었며
html의 img 태그로 죄측 원형의 이미지가 로드 되었다
html에는 img태그에 src속성과 body 태그의 background 속성의 url이 올바르게 로드 되었다