Webpack 셋팅 순서
node 프로그램 시작! -> package.json 파일 생성됨
- package.json에는 해당 프로그램의 기본정보
1. $ npm init -y
-> package.json 생성해줌
webpack을 설치
2. $ npm i -D webpack webpack-cli webpack-dev-server@next
- D는 개발전용, @next는 webpack-cli와 메이저 버전 일치하기 위해
- webpack-cli를 통해 개발 서버를 열거나 build 할 수 있음
- webpack-dev-server -> 새로고침시 페이지 바로바로 갱신되도록
- --mode로 development인지 production인지 구분
package.json scripts 설정
3. 개발서버를 열어주고 build 하기 위한 스크립트 설정
"scripts": {
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
}4. (선택) reset.css 설정 -> HTML title 태그 밑에 Link 태그로
5. root 경로에 webpack 구성파일 생성 및 설정- webpack.config.js
// import
// 절대경로를 가져오기 위한 전역 모듈인 path 가져옴
const path = require('path')
// export
module.exports = {
// 파일을 읽어들이기 시작하는 진입점 설정
entry: './js/main.js',
// 결과물(번들)을 반환하는 설정
output: {
// 절대 경로를 명시해야함(path 모듈 사용) / __dirname은 node 환경 전역 변수로 현재 파일이 있는 그 경로를 지칭함
// __dirname은 root경로이고 그 위치에 dist 폴더를 생성한다는 뜻
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
clean: true // 구성옵션을 바꿨을 때 이전 값들을 지우고 새로 만듦
}
}
- node.js 환경이므로 module.exports 해야함
dist 폴더 안에 Index.html 도 넣어주기 위한 플러그인 설정
6. $ npm i -D html-webpack-plugin
...
// 설치한 htmlplugin 가져옴
const HtmlPlugin = require('html-webpack-plugin')
...
// 번들링 후 결과물의 처리 방식 등의 다양한 플러그인들을 설정
plugins: [
new Htmlplugin({
template: './index.html'
})
]
- webpack은 파일들을 번들(병합)하기 위해 entry로 진입해서 설정한 옵션대로 파일들을 번들함.
- 그 과정에서 HtmlPlugin을 발견하고 설정한 경로에 있는 html 파일을 js 파일과 번들하여 dist 폴더로 만들어줌!
개발 서버 오픈할 때 구성을 localhost로 변경
- 포트번호 앞 localhost가 들어가야할 자리가 알수없는 값으로 들어가 있음
7. 플러그인 옵션에서 개발서버 오픈 설정
plugins: [
new HtmlPlugin({
template: './index.html'
})
],
devServer: {
host: 'localhost'
}
프로젝트에서 사용할 favicon 설정 - static 폴더
dist 폴더 안으로 복사해서 밀어 넣어주기(image 같은 파일들을)
8. $ npm i -D copy-webpack-plugin
plugins: [
new HtmlPlugin({
template: './index.html'
}),
new CopyPlugin({
patterns: [{ from: 'static' }] // static 폴더 안에 파일이 복사 되어서 dist 폴더 안으로 넣어줌
})
]- img 태그로 경로을 dist 폴더 안으로 모두 번들 되었을 때 경로로 사용 가능!(번들되면 모두 한 폴더 안에 만들어지기 때문에 주변경로(./)만 사용 가능) -> static 폴더 안을 copy 해서 dist로 넣어줬기 때문!
CSS, SCSS 처리 - webpack이 css를 읽고 bundle 할 수 있도록!
9. $ npm i -D css-loader style-loader
- SCSS를 사용한다면 -> $ npm i -D sass-loader sass
// output 이후 콤마찍고, module로 객체 형태로 CSS 처리
module: {
rules: [
{
test: /\.s?css$/,
use: [
'style-loader', // 실행순서 중요!(밑에서 부터 실행됨)
'css-loader',
// css loader가 먼저 실행됨 webpack이 main.js에 연결된 css 파일을 해석해서 htmldp style 태그로 삽입해줌
'sass-loader'
]
}
]
},Autoprefixer(Postcss) 적용 - 공급업체접두사(webkit, ms 같은 이전 버전의 css)
10. $ npm i -D postcss autoprefixer postcss-loader
module: {
rules: [
{
test: /\.s?css$/,
use: [
'style-loader'
'css-loader',
'postcss-loader', // sass-loader가 먼저 수행되고!
'sass-loader'
]
}
]
}// package.json 파일 내부
"browserlist": [
"> 1%",
"last 2 versions"
]- 전 세계 1% 이상의 점유율을 가지는 브라우저에서
- 마지막 두 번째 버전까지 지원
10-1. root 경로에 .postcssrc.js 파일 생성
// .postcssrc.js 파일 내부
module.exports = {
plugins: [require('autoprefixer')]
}Babel 설정! -> 이전 버전의 JS에서도 돌아갈 수 있게 compile 해줌
11. $ npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime
module: {
rules: [
{
test: /\.s?css$/,
use: [
'style-loader', // 실행순서 중요!(밑에서 부터 실행됨)
'css-loader', // css loader가 먼저 실행됨 main.js에 연결된 css 파일을 해석하는 역할
'postcss-loader',
'sass-loader'
]
},
{ test: /\.js$/, use: ['babel-loader'] }
]
}11-1. root 경로에 .babelrc.js 파일 생성
// babelrc.js 파일 내부
module.exports = {
presets: ['@babel/preset-env'], // 자바스크립트의 모든 기능 지원
plugins: [['@babel/plugin-transform-runtime']] // for 비동기처리
}번외) .ignore 파일 생성하여 추가
- .cache .DS_Store(맥일 경우) node_modules dist
$ npx digit {깃헙계졍/깃헙저장소 다운받을폴더} - {} 중괄호는 빼고 입력
- 깃헙 원격저장소를 다운 받을 수 있는 명령어
- $ git clone은 해당 저장소의 버전 관리 내역까지 같이 받아옴.
- $ npx digit은 저장소 안에 파일만 가져오기 때문에 git init으로 버전 관리를 새로 시작할 수 있음.
프로젝트 시작 다른 방법 깃헙 저장소에서 파일을 다운로드 받으면됨 이것을 쉽게 해준 것이 npx digit이다!
Software Developer