1. 모듈화
여기, helloWorld()라는 메서드가 정의되어 있는 index.html 파일이 있다.
<!DOCTYPE html>
<html>
...
<body>
<script>
function helloWorld(){
return 'Hello world';
}
alert(helloWorld());
</script>
</body>
</html>만약, 이 메서드를 다른 페이지에서도 사용해야 한다면 같은 코드를 중복해서 다시 정의해 주어야 한다는 문제가 발생한다.
이런 상황에서는 모듈화를 통해 문제를 해결할 수 있다.
<!DOCTYPE html>
<html>
...
<body>
<script>
alert(helloWorld());
</script>
<script src="./greeting.js"></script>
</body>
</html>↑ index.html
function helloWorld() {
return 'Hello world';
}↑ greeting.js
index.html 파일에서 helloWorld()메서드를 greeting.js 파일로 분리하고, script 태그로 모듈을 불러오도록 수정했다. 이제 같은 코드를 여러 페이지에서 공유할 수 있다!
이렇게 기능별로 코드를 분리하여 코드의 재사용성을 높이고 유지보수를 편리하게 하는 작업을 모듈화라고 한다.
2. Webpack 개념
모듈화에 대해 간단하게 살펴보았으니 본격적으로 webpack에 대해 알아보자.
Webpack을 왜 사용할까?
위에서 살펴보았듯 코드의 재사용성, 쉬운 유지보수 등을 위해서는 모듈 별로 코드를 관리하는 것이 중요하다. 코드의 양이 방대해지면 이의 중요성을 더더욱 커진다.
하지만 javascript는 이를 지원하는 모듈 시스템이 없다. 그렇다면 개발자가 일일이 수작업으로 관리해주어야 할까?
다행히 이런 한계를 극복하기 위해 개발된 도구들이 다양하게 존재한다. 그리고 그 중 하나가 바로 Webpack이라는 것이다!
Webpack이 뭘까
Webpack은 한마디로 자바스크립트 어플리케이션을 위한 정적 **모듈 번들러라고 설명할 수 있다. 즉, 여러 의존 관계에 있는 모듈들을 하나의 js 파일로 번들링하는 역할을 수행한다.
플러그인을 끼우면 번들링 뿐만 아니라 훨씬 확장적인 기능을 사용할 수도 있다.
Webpack은 컴파일 과정을 통해 의존관계에 있는 모듈을 엮어서 하나의 번들 파일로 반환한다
** Webpack에 대해 찾아보면 ‘모듈 번들러’라는 단어가 계속적으로 나오는데 번들링이란 여러 개의 파일을 하나의 파일로 만들어주는 작업을 의미한다.
장점
Webpack을 사용함으로써 우리가 얻을 수 있는 이점은 다음과 같다.
- 의존 모듈이 하나의 파일로 번들링되기 때문에 별도의 모듈 로더가 필요 없다.
- html 파일에서 script 태그로 다수의 자바스크립트 파일을 로드해야 하는 번거로움을 줄일 수 있다.
- 모듈 시스템 관리
- 로더 사용
- 빠른 컴파일
Webpack의 핵심 개념
Webpack 공식 사이트는 불친절하게도 자신의 서비스에 대해 제공하는 정보가 그렇게 풍부하지는 않다. 하지만 이것만은 꼭 알아야 하는지 핵심 개념이라며 6가지 개념을 소개하고 있다.(실습해보니 중요하긴 하다)
- Entry
내부적인 의존성 그래프의 빌드를 시작하기 위해 webpack이 어디를 향해야 하는지 설정한다.
module.exports = {
entry: './path/to/my/entry/file.js'
};
2. Output
Webpack이 만들어낸 번들을 저장할 위치, 이름을 설정한다.
아래의 예시대로 한다면 ./dist라는 경로에 번들링된 모듈이 my-first-webpack.bundle.js이라는 이름으로 저장된다.
const path = require('path');module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
3. Loaders
Webpack이 이해할 수 있는 건 자바스크립트, Json 파일 뿐이다.
따라서 loader 설정을 통해 (1)다른 타입의 파일을 처리하고 (2)어플리케이션이 사용할 수 있는 형태로 변환하고 (3)의존성 그래프에 추가하는 역할을 수행시킬 수 있다.
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]}};
로더 종류 → https://github.com/webpack/webpack#loaders
4. Plugins
말그대로 플러그인이라 딱히 설명할 게 없었다… 플러그인 기능을 통해서 기능을 확장시킬 수 있다는 것!
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in pluginsmodule.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
5. Mode
development, production, none으로 설정함으로써 webpack을 각 환경에 맞게 일치시킬 수 있다.
- development: 개발용
- production: 배포용. 이 경우에는 알아서 최적화가 적용됨
module.exports = {
mode: 'production'
};
6. Browser Compatibility
크롬이나 파이어폭스 등 요즘 웬만한 브라우저들은 **사용자의 업데이트와 관계없이 자바스크립트의 버전을 지원한다. 하지만 IE는 그렇지 않다.
요즘 누가 IE를 쓰냐만은 어쨌든 완전히 0에 수렴하진 않기 때문에 최신 버전의 ES를 지원하지 않는 브라우저에게는 서비스하지 않거나 최신의 기술을 사용하지 못할 수도 있다. 아니면 모든 경우를 고려해 코드를 작성하거나.
Webpack은 ES5-compliant한 브라우저에서도 ES6 스펙의 자바스크립트 코드가 호환 가능하도록 도와준다.
설치
npm install --save-dev webpack webpack-cli'IT > Vue.js' 카테고리의 다른 글
| [vue.js] vuex (0) | 2021.02.21 |
|---|---|
| [vue.js] 뷰 CLI (0) | 2021.02.20 |
| [vue.js] 싱글 파일 컴포넌트 체계 (0) | 2021.02.20 |
| [vue.js] 데이터 바인딩 (0) | 2021.02.20 |
| [Vue.js] Vue 템플릿(Vue template) (0) | 2021.02.20 |
