webpack

💡 자바스크립트는 모듈을 지원하지 않았지만 (ES5), 자바스크립트에 새로운 표준인 ECMAScript6(ES6)가 생기면서 모듈을 지원.

그러나 브라우저는 여전히 파일 단위 모듈을 잘 모름.

웹펙의 4가지 개념

엔트리

// webpack.config.js
module.exports = {
    entry: { 
				// 시작점 경로
        main: './src/main.js',
    }
}

아웃풋

// webpack.config.js
module.exports = {
    output: {
        filename: 'bundle.js', 
        path: '.dist'
    }
}

//dist/buldnle.js -- 번들링된 파일
<body>
    <script src="./dist/bundle.js"></script>
</body>

로더

웹팩은 자바스크립트 파일 뿐 아니라 이미지, 폰트, 스타일시트까지 전부 모듈로 관리
웹팩은 자바스크립트밖에 모름
- 자바스크립트가 아닌 파일들은 웹팩이 이해하도록 변경해야함
- 이 역할을 바로 로더가 해줌
예시 - css-loader
- css를 자바스크립트 파일로 변환해서 로딩할 때 사용하는 로더
- test에 로딩할 파일을 지정해주고, user에 사용할 로더를 정해주면 됨
- //webpack.config.js module.exports = { module: { rules: [{ test: /\\.css$/, use: ['style-loader', 'css-loader'] }] } }

플러그인

로더는 (번들되기 전) 파일단위를 처리하는 반면, 플러그인은 번들된 결과물을 추가로 처리
번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용할 수 있음
예시 - UglifyJsPlugin
- 자바스크립트 결과물을 난독화 처리하는 플러그인
- 플러그인을 사용할 때는 웹팩 객체의 plugins 배열에 추가