April 08, 2020
프론트엔드 프레임워크에서 가장 많이 사용하는 모듈 번들러(Module Bundler) 입니다.모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다.
※ 빌드, 번들링, 변환 이 세 단어는 모두 같은 의미입니다.
webpack.config.js
const path = require('path);
module.exports = {
// 모듈 네임
name: 'word-relay-setting',
// 웹팩 실행 모드: development, production, none
mode: 'development',
devtool: 'eval',
resolve: {
// webpack에서 모듈을 읽어올 때 파일 확장자 체크
extensions: ['.js', '.jsx']
}
// 입력
entry: {
app: ['./client', 'WordRelay'],
},
module: {
rules: [{
test:/\.jsx?/, // 적용할 파일 체크
loader: 'babel-loader',
options: {
presets: [
['babel/preset-env',{
targets: {
browsers: ['last 2 chrome versions']
}
}
], '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties']
// class형 컴포넌트에서 state = {} 문법을 사용할 때 필요
}
}]
}, // 입력받은 모듈에 모듈을 적용
plugins: [],
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
} // 출력
}
mode의 설정값에 따라 웹팩이 다르게 실행되며, 실행 모드는 3가지가 있습니다.
none
: 모드 설정 Xdevelopment
: 개발에 좀 더 편하게 웹팩 로그나 결과물이 보입니다.production
: 성능 최적화 작업을 합니다.(파일 압축, 빌드)웹 애플리케이션이 실행될 수 있게 빌드를 하기 위해 모든 소스의 경로가 담겨져 있어야 할 영역입니다.
module
속성으로 표현한다.module: {
rules: [
{
test: /\.scss$/,
use: ['css-loader', 'sass-loader'],
},
]
}
좀 더 다양한 옵션을 추가해서 표시할 수도 있다.
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: { modules: true },
},
{ loader: 'sass-loader' },
],
},
]
}
로더는 파일을 해석하고 변환하는 과정에 관여한다면 플러그인은 결과물의 형태를 바꾼다고 생각할 수 있습니다.
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [new HtmlWebpackPlugin(), new webpack.ProgressPlugin()],
}