웹팩 주요 속성 4가지
entry(상세내용)
웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로module.exports = { // ... entry: "./src/index.js", };output(상세내용)
웹팩을 돌리고(빌드) 난 결과물의 파일 경로를 의미module.exports = { // ... output: { filename: "bundle.js", path: path.resolve(__dirname, "./dist"), }, };loader(상세내용)
로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성module.exports = { // ... module: { rules: [], }, };plugin(상세내용)
플러그인(plugin)은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성입니다. 로더랑 비교하면 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면, 플러그인은 해당 결과물의 형태를 바꾸는 역할module.exports = { // ... plugins: [], };
로더 순서의 중요성
특정 파일에 대해 여러 개의 로더를 사용하는 경우 로더가 적용되는 순서에 주의해야 합니다. 로더는 기본적으로 오른쪽에서 왼쪽 순으로 적용됩니다.
예시
module.exports = {
// ...
module: {
rules: [
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
]
}
}위 로더 속성 기준으로 sass-loader → css-loader → style-loader 순서로 실행이 된다.
sass-loader: SCSS 파일을 CSS 파일로 변환css-loader: 웹팩에서 CSS 파일을 인식(import처리)style-loader:<head>안에 CSS 파일 내용을 인라인 스타일 태그 추가
만약, 1번, 2번 순서가 바뀐다면 SCSS 파일을 CSS 변환하지 못하여 빌드 단계에서 오류가 발생된다. 이러므로 로더 추가시 기능을 이해하고 적용 순서 고려해야 될 것 이다.
UI 마크업 개발자 장지훈입니다.