1.
우선 cmd나 터미널에 설정할 폴더로 들어간다.
2.
npm init -y
명령어로 init을 해줘서 package.json파일을 만들어 준다.
3.
npm i -D webpack webpack-cli
웹팩 관련된 라이브러리를 이 명령어로 설치한다.
"devDependencies": {
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0"
}그럼 package.json파일안에
devDependencies부분에 보면
"webpack-cli가 설치된 것을 볼 수 있다.
4.
"scripts": {
"build": "webpack"
},그리고 scripts 부분에
기존에 있는 test부분을 지우고,
build라고 설정을 해준다.
5.
웹팩은 최소한의 옵션을 설정해줘야 하기때문에
webpack.config.js파일을 만들어 준다.
module.exports = {
mode: 'development',그리고 mode에는 개발용이냐, 프로덕션용으로 할꺼냐 설정해주는건데
개발용으로 설정하는 것이기때문에 development로 해준다.
module.exports = {
mode: 'development',
entry: {
main:'./src/main.js'
},두번째로는 entry를 설정해준다.
웹팩은 js, css, 이미지파일등을 하나로 만들어 주는 역할을 하는데,
여러개의 모듈로 연결되어 있는 시작점을 entry라고 한다.
그래서 웹팩에게 entry가 어딘지 알려주면
연결되어 있는 모든 모듈을 하나로 만들어서
결과물로 내는 것이다.
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main:'./src/main.js'
},
output: {
path:path.resolve('./dist'),
filename:'[name].js',
}
}그리고 또 output을 만들어 줘야하는데
이것은 여러개의 모듈을 하나로 만들어서 저장시킬 위치를 이야기 한다.
우선 path에는 폴더를,
filename에는 파일 이름을 작성한다.
path는 노드 모듈중에 path모듈을 가져와서 절대경로로 작성해준다.
위에는 dist폴더에 결과물을 저장하라고 작성한 것이다.
filename은 name이라는 값이 들어오고
js로 끝나는 파일을 만든다는 뜻이다.
이때, 변수는 entry에 설정한 key값이 들어올 것이다.
그래서 결과적으로 main.js가 웹팩 결과물로 나오는 것이다.
이것을 cmd, 터미널에서 npm run build하면
합쳐진 파일이 만들어진다.
dist폴더안에main.js가 생긴다.
<script type="module" src="./dist/main.js" defer></script>그리고 index.html파일에
dist/main.js를 연결해서 잘 나오는지 확인한다.
6.
이번에는 css파일을 웹팩 설정을 알아볼 것이다.
cmd, 터미널에
npm i -D css-loader
를해줘서 css를 설치해준다.
7.
그리고 webpack.config.js 파일에서
module.exports = {
mode: 'development',
entry: {
main:'./src/main.js'
},
output: {
path:path.resolve('./dist'),
filename:'[name].js',
},
module: {
rules: [
{
test: /\.css$/,
use:['css-loader']
}
]
}
}module을 설정해준다.
그 안에는 rules라는 배열에
test를 만들고 그곳에는 css정규 표현식을 입력해준다.
그리고 use에는 방금 설정한 css로더를 설정한다.
그리고 한번 더 npm run build 해준다.
그럼 main.js파일로 가보면 자바스크립트 문자열로 들어와있는것을
확인할 수 있다.
8.
다음으로는 스타일로더를 설정해준다.
npm i -D style-loader
로 스타일로더를 설치해준다.
module.exports = {
mode: 'development',
entry: {
main:'./src/main.js'
},
output: {
path:path.resolve('./dist'),
filename:'[name].js',
},
module: {
rules: [
{
test: /\.css$/,
use:['style-loader', 'css-loader']
}
]
}
}그리고 webpack.config.js파일로가서
css-loader앞에 style-loader를 추가해준다.
그리고 npm run build 해준다.
9.
다음으로는 이미지 파일 로더를 해줄것이다.
이때는 파일로더가 필요한데,
마찬가지로
npm i -D file-loader 해준다.
module.exports = {
mode: 'development',
entry: {
main:'./src/main.js'
},
output: {
path:path.resolve('./dist'),
filename:'[name].js',
},
module: {
rules: [
{
test: /\.css$/,
use:['style-loader', 'css-loader']
},
{
test: /\.png$/,
use:['file-loader']
}
]
}
}그리고 css, style과 마찬가지로
png정규표현식을 설정하고
use에 file-loader를 해준다.
다시 npm run build
test: /\.png$/,
use: [{
loader: 'file-loader',
options: {
pubilcPath:'../dist'
}
}]
경로가 dist로 안되어 있는데
이럴때는 로더와 옵션을 사용해서
경로를 위에 처럼 설정해준다.
10.
이제 html을 설정해 줄것이다.
npm i html-webpack-plugin -D
이것처럼 플러그인을 사용해서 설치를 해준다.
const HtmlWebpackPlugin = require('html-webpack-plugin');플러그인 형태라서 생성자 함수를 가져와야한다.
plugins: [
new HtmlWebpackPlugin({
template:'./index.html'
})
]그리고 모듈 아래에 plugins을 만들어서
함수를 불러주고,
템플릿 경로를 설정해준다.
그럼 dist폴더안에
index.html파일이 만들어진다.
아까 이미지 호출할 때 dist 폴더 경로 설정한것을
지워줘도 된다.
index파일도 웹페이지 경로를 만들기 때문이다.
{
test: /\.png$/,
use: [{
loader: 'file-loader',
options: {
name:'[name].[ext]?[hash]'
}
}]
}대신 이미지 파일을 불러 올 때
각 파일의 이름과 확장자로 불러오는 것이 좋기때문에
변수를 사용해서 원본 이미지 이름과 확장자를 불러준다.
?[hash]를 사용해서 파일을 호출 할 때
최신 파일을 호출할 수 있게 해준다.
그리고 또 빌드!