웹팩이란?
- 모듈로 연결된 여러 개의 자바스크립트 파일을 하나로 만들어주는 역할을 한다.
- 하나로 합쳐진 파일을 번들이라고 하는데 웹팩은 번들을 만들어주는 번들러이다.
웹팩 설치
webpack&webpack-cli을 설치한다.
npm install -D webpack webpack-cli- 웹팩 설치 후 프로젝트 루트 폴더에
webpack.config.js파일을 만든다.
웹팩 설정
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: ./src/index.js,
output: {
path: path.resolve(./dist),
filename: bundle.js
},
...
}- 웹팩 필수 옵션 조건
--mode: development, production, none 웹팩 빌드 옵션으로 환경에 따라 설정해 준다.--entry: 모듈의 시작점을 엔트리 또는 엔트리 포인트라고 한다. 엔트리 포인트부터 하나씩 모듈을 엮어 js 파일로 만든다. (예: src/index.js)--output: 모듈이 시작되는 부분부터 모두 합쳐준 결과물을 저장하는 곳path: 합쳐진 결과물 파일을 저장하는 폴더 경로filename: 합쳐진 결과물 파일 이름이다. 보통 "bundle.js" 또는 "[name].js"로 많이 사용한다.
로더
로더는 모든 파일을 자바스크립트 모듈처럼 만들어준다. 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지 및 css 파일을 자바스크립트에서 직접 로딩할 수 있도록 해준다.
- 로더는
modules객체의rules배열에 추가하여 설정할 수 있다. - rules 배열에는 객체를 넣는데 test에는 로더가 처리해야 할 파일들의 패턴을 정규 표현식으로 작성하고 use에는 사용할 로더를 작성한다.
css-loader & style-loader
css-loader는 css 파일을 모듈처럼 사용할 수 있게 해주는 로더이고 style-loader는 css-loader가 처리해 준 모듈처럼 사용할 수 있게 해주는 로더이다. js 파일의 css 문자열을 브라우저에 html에 주입시켜 브라우저에 보일 수 있도록 처리해준다.
npm install css-loader style-loaderwebpack.config.js
const path = require('path');
module.exports = {
mode: "development",
entry: "./src/app.js",
output: {
path: path.resolve('./build'),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.css$/, // css로 끝나는 모든 파일
use: [
'style-loader',
'css-loader'
]
}
]
}
}- css로 끝나는 모든 파일마다 작성한 로더가 실행된다.
- 위와 같이 로더는 한 파일에 여러 개가 실행될 때 배열의 뒤에서부터 앞으로 실행된다.
(예: css-loader → style-loader 순으로 실행된다.)
file-loader
이미지 파일을 모듈로 사용할 수 있도록 변환하는 역할을 하는 로더이다.
npm i file-loaderwebpack.config.js
const path = require('path');
module.exports = {
mode: "development",
entry: "./src/app.js",
output: {
path: path.resolve('./build'),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.css$/, //css로 끝나는 모든 파일
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|jpg|svg|gif)$/, //png,jpg,svg,gif로 끝나는 모든 파일
loader: 'file-loader',
options: {
publicPath: './dist/',
name: '[name].[ext]?[hash]' // [원본 파일명].[확장자명].[해쉬값]
}
},
]
}
}- 빌드된 이미지 경로를 사용할 수 있도록 publicPath 경로를 설정해 준다.
- option name에 [원본 파일명].[확장자명].[해쉬값(캐시와 관련된 문제를 해결)]를 설정한다.
플러그인
로더는 모듈로 연결되어 있는 파일마다 변환하는 과정에서 처리한다면 플러그인은 아웃풋으로 번들링 된 결과물을 처리해 준다.
BannerPlugin
child_process설치하면 터미널 명령어를 실행할 수 있다. childProcess.execSync에 문자열을 넣어 터미널 명령어를 사용할 수 있다.
const path = require('path');
const webpack = require('webpack');
const childProcess = require('child_process'); // 터미널 명령어를 실행할 수 있다.(node_module)
module.exports = {
mode: "development",
entry: "./src/app.js",
output: {
path: path.resolve('./build'),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.css$/, //css로 끝나는 모든 파일
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|jpg|svg|gif)$/, //png,jpg,svg,gif로 끝나는 모든 파일
loader: 'file-loader',
options: {
publicPath: './dist/',
name: '[name].[ext]?[hash]' // [원본 파일명].[확장자명].[해쉬값]
}
},
]
},
plugins: [
new webpack.BannerPlugin({banner: `
Build Date: ${new Date().toLocaleString()}
Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')}
Author: ${childProcess.execSync('git config user.name')}
`})
]
}CleanWebpackPlugin
webpack으로 빌드를 할 때마다 자동으로 이전에 빌드 된 아웃풋 폴더를 삭제하고 다시 빌드 할 수 있는 플러그인이다.
npm i clean-webpack-pluginconst path = require('path');
const webpack = require('webpack');
const childProcess = require('child_process'); // 터미널 명령어를 실행할 수 있다.(node_module)
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: "development",
entry: "./src/app.js",
output: {
path: path.resolve('./build'),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.css$/, //css로 끝나는 모든 파일
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|jpg|svg|gif)$/, //png,jpg,svg,gif로 끝나는 모든 파일
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]' // [원본 파일명].[확장자명].[해쉬값]
}
},
]
},
plugins: [
...
new CleanWebpackPlugin(),
...
]
}
개발 노트