웹팩 기본 설정 실습
https://www.youtube.com/watch?v=rbmUFHZt3sg&t=364s
김정환님의 '웹팩(Webpack) 최소설정으로 프론트엔드 개발 환경 만들기' 영상을 참고하여 만든 실습 프로젝트입니다.
https://www.notion.so/Webpack-a91feb0dc5d4432f91dfe7bbb2672ee1
npm init -y
npm i -D webpack webpack-clinpm scripts에 빌드 추가 ( build : webpack) -> npm run build 시 웹팩 스크립트가 실행된다.
웹팩은 최소한의 설정이 필요하다. webpack.config.js 설정파일을 만들자.
const path = require('path')
module.exports = {
mode: 'development',
entry: {
main: './src/app.js'
},
output: {
path: path.resolve('./dist'),
filename: '[name].js'
}
}- mode - 개발용이냐 프로덕션 용이냐. 우리는 development로 하자.
- entry -여러개의 모듈로 연결되어있는 시작점. 웹팩에서 알려주면 연결되어있는걸 실행시킨다. 엔트리에 시작점을 만들어주면 된다.
- output은 여러개의 모듈을 하나로 만들어서 저장시킬 위치. 두개로 이루어져있는데 폴더 이름과 파일명을 입력하면 된다.
- filename : [name].js => 이 변수는 엔트리에 설정한 키값이 들어올 것이므로 결과적으로 main.js가 만들어질것
src폴더에 app.js 만들어보자. 돔이 만들어지고 실행되는 코드.
import { sum } from './math.js';
import './app.css'
window.addEventListener('DOMContentLoaded', () => {
sum(1, 2);
const el = document.querySelector('#app')
el.innerHTML = `<h1>1+2 = ${sum(1,2)}</h1>`
})export function sum(a, b) {
return a + b;
}math.js에 sum이라는 함수를 만든 뒤, app.js에서 math.js 코드를 가져와보자.
이후 npm run build 명령어를 실행시키면
dist파일에 만들어 지는 것을 확인할 수 있다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="../dist/main.js"></script>
</body>
</html>.open src/index.html을 하면 정상적으로 실행되는 것을 확인할 수 있다.
웹팩은 CSS파일도 모듈로 인식한다. CSS파일도 하나의 파일로 머지가 될 것.
그러려면 css관련된 웹팩 설정을 해야하는데 이때 사용하는 것이 css-loader.
npm i -D css-loader 으로 설치해주자.
그다음에 웹팩 설정에 모듈에 설정을 해줘야한다.
const path = require('path')
module.exports = {
mode: 'development',
entry: {
main: './src/app.js'
},
output: {
path: path.resolve('./dist'),
filename: '[name].js'
},
module: {
rules: [{
test: /\.css$/,
use: ['css-loader']
}]
}
}app.css를 만들어 body color 적용 뒤,
app.js에서 가져와보자 import './app.css'
body {
background-color: pink;
}그뒤에 빌드를 해보자.
하지만 브라우저에서 확인하면 여전히 색상 적용이 안됐다. 브라우저가 아직 인식을 못했기 때문에!
**이를 위해 style-loader를 설치해줘야한다. (**npm i -D style-loader)
그 뒤에 웹팩 config module에 추가해주자.
module: { rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }] }다시 npm run build를 하면 색상이 적용된걸 확인할 수 있다.
이미지를 src로 가져온 뒤, app.js에서 import해주자.
그 뒤에 해당 이미지를 노출시키기 위해 innerHTML에 다음과 같이 작성한다.
import { sum } from './math.js';
import './app.css'
import webpackImage from './webpack.png'
window.addEventListener('DOMContentLoaded', () => {
const el = document.querySelector('#app')
el.innerHTML = `
<h1>1+2 = ${sum(1,2)}</h1>
<img src="${webpackImage}" alt="webpack"/>`
})이미지 파일을 다룰수 있도록 웹팩 설정을 해주자 (file-loader)
npm i -D file-loader로 파일로더를 설치해주자.
그 뒤에 웹팩설정에서 png확장자에 대해 모듈 설정을 다음과 같이 추가해주자.
const path = require('path')
module.exports = { mode: 'development', entry: { main: './src/app.js' }, output: { path: path.resolve('./dist'), filename: '[name].js' }, module: { rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.png$/, use: [{ loader: 'file-loader', options: { publicPath: '../dist' } }] } ] }
}options :
publicPath : '../dist’하면
이미지로 호출할떄 경로를 앞에 추가해준다.
npm run build를 하면 정상적으로 이미지가 로드된 것을 확인할 수 있다.
이 때는 로더가 아니라 플러그인을 사용한다.
npm i html-webpack-plugin -D플러그인 함수라서 생성자 함수가 필요.
webpack.config.js에 생성자 추가한 뒤에 그리고 모듈 아래에 plugins라는 배열을 추가.
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
mode: 'development',
entry: {
main: './src/app.js'
},
output: {
path: path.resolve('./dist'),
filename: '[name].js'
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.png$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin(),
]
}인자로 템플릿파일의 위치를 지정한다.
index.html을 보면 로딩했던 아웃풋의 경로를 넣어줬었는데
이제는 플러그인이 자동으로 넣어줄 것이기 때문에 제거해도 괜찮음.
npm run build해주면 dist 폴더에 index.html이 만들어지는 것을 볼 수 있다.
그리고 이미지 호출할때 path로 dist를 별도로 지정했었는데
이제는 index.html도 웹팩이 만들기 때문에 주소를 따로 만들지 않아도 된다.
so options : publicPath를 제거 해주자. 그러면 이미지도 dist에 있는걸 자동으로 가져오니까 문제없이 작동한다.
- options: 결과물의 이름을 해시값보다는 실제 파일값으로 하는게 좋을 것 같다.
test: /\.png$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}]이렇게 하면 원본파일의 이름과 확장자를 그대로 가져오고 파일을 호출할때 최신 파일을 호출.
그러면 dist 안에 있는 파일들의 이름이 원본 파일로 바뀌는 것을 확인가능.
웹팩으로 이미 만들어진 해시 파일명의 파일들을 삭제가능하다.
npm i -D clean-webpack-plugin생성후({}감싸야함), plugins인 아래에 new CleanWebpackPlugin()
하면 자동으로 아웃풋으로 설정된 dist폴더를 삭제하고 웹팩을 돌릴 것.
해시가 파일명인 파일이 사라지고 깔끔하게 파일 생성됨!