웹팩에서 file-loader로 이미지 불러오기
웹팩에서 file-loader로 이미지 불러오기
ES6 학습하기전 웹팩을 학습하면서 css-loader 및 ExtractTextPlugin 플러그인을 사용해
로드하고 번들링을 한다. 그리고, 이미지 등 다른 확장자를 가진 파일들은 file-loader를 통하여 로드 할 수있다.
예제는 npm에 잘나와있지만 보기쉽게 정리 할겸 포스팅 하였다.
참고로 개발환경은 웹팩1에서 작업하였다.
목차
설치
npm install -i -d file-loader
개발모드로 file-loader 모듈을 설치한다.
사용법
use : "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images/"
웹팩2를 기준으로 use 로 로드 하지만 웹팩1에서는 loader 로 로드 해주면 된다.
- [ext] 파일의 확장자
- [name] 파일의 이름
- [path] 파일의 기본 경로를 지정한다.
- [hash] 기본적으로 생략된 내용의 해시 태그를 사용한다.
- [
:hash: : ] 이것들중 선택 할 수 있다.
other hashTypes, i. e. sha1, md5, sha256, sha512
other digestTypes, i. e. hex, base26, base32, base36, base49, base52, base58, base62, base64 and length the length in chars - [N] 파일 이름과 일치하지 않는 파일 이름을 param으로 전송하여 파일을 일치 시킨다.
webpack.config.js Examples
...
module: {
loaders: [ // 어플리케이션을 위해 적어줄 로더들 배열
{
test: /\.(jpe?g|png|gif|svg)$/i, // 이미지 로더
exclude: /node_modules/,
loader: 'file-loader?name=[name].[ext]&publicPath=../images/&outputPath=./images/' // PublicPath : css 이미지 폴더 경로, outputPath : 이미지 폴더 경로
}
]
}
당신은 publicPath 지시어를 통하여 불러오는 파일의 기본 폴더 위치를 지정할 수 있고, outputPath 지시어를 통하여
업로드 하는 파일의 경로를 지정해 줄 수 있다.
예시
require("file-loader?name=js/[hash].script.[ext]!./javascript.js");
// => js/0dcbbaa701328a3c262cfd45869e351f.script.js
require("file-loader?name=html-[hash:6].html!./page.html");
// => html-109fa8.html
require("file-loader?name=[hash]!./flash.txt");
// => c31e9820c001c9c4a86bce33ce43b679
require("file-loader?name=[sha512:hash:base64:7].[ext]!./image.png");
// => gdyb21L.png
// use sha512 hash instead of md5 and with only 7 chars of base64
require("file-loader?name=img-[sha512:hash:base64:7].[ext]!./image.jpg");
// => img-VqzT5ZC.jpg
// use custom name, sha512 hash instead of md5 and with only 7 chars of base64
require("file-loader?name=picture.png!./myself.png");
// => picture.png
require("file-loader?name=[path][name].[ext]?[hash]!./dir/file.png")
// => dir/file.png?e43b20c069c4a01867c31e98cbce33c9