질문 : 번들링이 왜 필요한가요?
- HTML, CSS, JS 를 하나의 파일로 압축, 전처리, 최적화하는 과정입니다.
물론, 번들링 과정을 하지 않고도 배포는 가능하지만, 사용자가 웹앱에 접근할때마다
많은 파일들을 요청하고 다운받아야 하므로, 서버와 사용자 모두에게 부담이 됩니다. 따라서 사용자에게 배포하기 전에 번들링은 필수적인 과정입니다.
크루답변
번들링을 해주지 않는다면 다양한 상황이 일어나 어려움에 처할 수 있습니다. 예를 들어,
- 두 개의 .js 파일에서 같은 변수를 사용하고 있어서, 변수 간 충돌이 일어났습니다.
- 딱 한 번 불러오는 프레임워크 코드가 8MB라서, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자가 불편을 호소합니다.
- 번들 파일 사이즈를 줄이기 위해서 파일의 공백을 모두 지웠는데, 가독성이 너무 떨어져서 코딩하기기 어렵습니다. 결국 그대로 공백을 되돌려서 코딩합니다.
- 배포 코드가 너무 읽기 쉬워 개발을 할 줄 아는 사용자가 프론트엔드 애플리케이션을 임의로 조작하여 피해가 발생했습니다.
등의 어려움이 생길 수 있기 때문에 번들링은 꼭 필요합니다.
질문 : 사용가능한 번들러?
- 웹팩, 브라우져파이, 파셀 등이 있다.
질문 : 웹팩 사용 이유?
- 웹팩은 배포하기 전에 번들링해주는 모듈 번들러이다.
웹팩 설정 파일 분석해보기
var path = require('path')
var webpack = require('webpack')
module.exports = {
mode: 'production', // 해당 웹팩 설정파일은 배포를 위한 모드이다.
entry: './src/main.js', // 웹팩이 빌드를 시도할 때, 첫 진입점 파일을 의미한다.
output: {
path: path.resolve(__dirname, './dist'), // 빌드의 결과물이 저장될 폴더명
publicPath: '/dist/', // 1) 아래 작성
filename: 'build.js' // 빌드 결과물의 이름
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
// .css 확장자를 가진 파일 모두, css-loader, vue-style-loader를 적용시킨다.
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
// .vue 확장자를 가진 파일 모두, vue-loader를 적용시킨다.
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
// .js 확장자를 가진 파일 모두, babel-loader를 적용시킨다. 단, node_modules 폴더는 제외시킨다.
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
// .png|jpg|gif|svg 확장자를 가진 파일 모두, file-loader를 적용시킨다. 이때 파일명 뒤에 해쉬를 붙인다. (이미지가 캐싱되어도 해쉬값이 변경되면 이미지 업데이트시 다시 새로운 이미지를 불러오게하기 위함)
]
},
resolve: {
// 2
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
// 3
extensions: ['*', '.js', '.vue', '.json']
},
// 데브 서버 실행시, 옵션지정 참고 - https://webpack.js.org/configuration/dev-server/
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
// 빌드결과물 크기에 대한 경고를 띄울수있는 옵션 - https://webpack.js.org/configuration/performance/
performance: {
hints: false
},
// 소스매핑스타일에 대한 옵션 (빌드에 대한 소요시간에 영향을 끼칠 수도 있다) - https://webpack.js.org/configuration/devtool/
devtool: '#eval-source-map'
}
Hello world!