여러개의 파일을 하나의 파일로 묶어주는 역할을 함.
Webpack vs Rollup vs Parcel
위 세가지가 가장 많이 쓰이는 번들러임.
- Webpack ➡️ 다양하고 복잡한 프로젝트에 추천 (대부분이 선호)
- Parcel ➡️ 소규모 프로젝트나, 간단하게 사용하고 싶을때 추천
- Rollup ➡️ 효율성을 고려하는 프로젝트에 추천
규모있는 프로젝트에 추천하는 번들러
공식 사이트
- npm init -y
- npm i -D webpack webpack-cli webpack-dev-server@next
- package.json 폴더의 script부분에 아래의 코드 작성
➡️ "dev" : "webpack-dev-server --mode development"
➡️ "build" : "webpack --mode production"- webpack.config.js 파일 생성 (향후 설정용)
webpack은 기본적으로 프로그램이 어디로 진입해줘야하는지 ➡️ entry
처리가 완료되면 결과물을 어디로 내어줘야하는지 설정해줘야함 ➡️ output
output
output에서는, 상대경로가 아니라 절대 경로를 사용해줘야함
node.js 에서 사용하는 path라는 전용 모듈 사용,
"__dirname" : 현재 파일이 존재하는 경로를 지칭해줌
근데 기본적으로 설정된 경로와 파일이름이 존재하기 때문에, 생략해줘도 상관없음.
(dist 폴더의 main.js)clean: true 이 명령으로 이전의 build값 초기화.
번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정 가능
npm i -D html-webpack-plugin
static이라는 폴더 생성 후, 각종 정적 파일들 삽입
(ex. images라는 폴더 생성 후 이미지들 삽입)
‼️ static이 빈 폴더일 경우
unable to locate glob
오류 발생!
npm i -D copy-webpack-plugin
const CopyPlugin = require('copy-webpack-plugin') plugins:[ new CopyPlugin({ patterns: [ {from: 'static'} ] }) ]
css
적용시키는 방법
main.js
파일에import '../css/main.css'
선언
(wepack
이entry
시에main.js
를 읽고, 거기서 연결된css
를 다음 순서로 읽는 구조)
단, css파일을 해석하려면, loader가 필요함.
npm i -D css-loader style-loader
webpack.config.js 파일에 추가
module:{ rules: [ { test: /\.css$/, // 정규 표현식 : .css로 끝나는 모든 파일들을 찾음 use: [ 'style-loader', 'css-loader' ] } ] },
webpack.config.js 파일에 추가
module:{ rules: [ { test: /\.s?css$/, // 정규 표현식 : .css로 끝나는 모든 파일들을 찾음 use: [ 'style-loader', 'css-loader', 'sass-loader' ] } ] },
npm i -D sass-loader sass
npm i -D postcss autoprefixer postcss-loader
webpack.config.js 파일에 추가
module:{ rules: [ { test: /\.s?css$/, // 정규 표현식 : .css로 끝나는 모든 파일들을 찾음 use: [ 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader' ] } ] },
pakage.json 파일에 추가
"browserlist": [
"> 1%",
"last 2 versions"
]
}
루트 경로에 .postcssrc.js 파일 추가
module.exports = { plugins: [ require('autoprefixer') ] }
reset.css (link 태그) 삭제!
npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime
루트경로에 .babelrc.js 파일 추가
module.exports = { presets: ['@babel/preset-env'], plugins: [ ['@babel/plugin-transform-runtime'] ] }
webpack.config.js 파일에 추가
module:{ rules: [ { test: /\.js$/, // 정규 표현식 : .js로 끝나는 모든 파일들을 찾음 use: [ 'babel-loader' ] } ] },
npm i -D babel-loader
루트 경로에 .gitignore 파일 추가
.cache .DS_Store node_modules dist
- New site from git
github
해당 저장소 선택- 정보 확인 (만일
Build command
나폴더 directory
가 다를 경우 수정)
git clone
이란 명령어는 그 파일의 버젼의 내역까지 같이 가져오기 때문에,
템플릿으로 이용하는, 즉 현재의 프로젝트를 이용해서 새 프로젝트를 만들려면 npx degit이 적합함.
(or git
에서 zip파일
로 내려받기)
npx degit (불러오려는 git 레포지토리) (붙여넣을 폴더 이름)
잘 정리하셨네요! 이해가 잘 됩니다~!