웹팩!
내가 프론트엔드 개발자라면, 빈 프로젝트 만들면 무조건 처음엔 터미널 열어서
$ npm init -y 입력
→ 템플릿 가져온 상태면 굳이 안해도된다. 이건 package.json 파일을 위함! package.json 파일이있다면 이미 그건 Npm 프로젝트임
$ npm i webpack webpack-cli webpack-dev-server -D
devDendencies (개발 의존성 패키지)로 잘 설치 완료 되었는지 package.json파일에서 보면된다.
만약 일반 의존성파일로 설치되었다면 "dev"를 추가로 입력해주고 npm i 해주면 된다.(package.json 파일만 맞추면 됨)
webpack.config.js 파일 생성
//내보내기 구조,(기본 객체데이터)
module.exports = {
entry: {},
output: {}
}두가지 옵션: entry, output
진입점(entry)을 잘 설정 해줘야 한다. 조직도를 상상해보자. 가장 최상위에 있는게 진입점이라고 생각하면 웹팩이 가장 진입점을 통해 연결 연결해서 가장 최하위 파일까지 연결한다.
entry 포인트는 보통 한개이다. 위치는 webpack.config.js 파일 기준 이다.
output은 웹팩: 번들 다 했는데 어디로 드릴까요?
webpack.config.js 파일에 entry연결
//내보내기 구조,(기본 객체데이터)
module.exports = {
entry: {
main: './main.js'
},
output: {
path: `${__dirname}/dist` // 이미 기본 값 안써도 됨
filename: '[name].js' // 이미 기본값. 안써도 됨
}
}
// output: {} 이렇게만 써도 됨output 의
path: 어느 경로로 드릴까요
기본값 : ${__dirname}/dist 이거 안써도 dist 폴더로 뱉어준다.
filename: 엔트리 포인트로 설정된 네임이 filename으로 들어감
output 옵션은 webpack.config.js 파일을 웹팩이라는 패키지가 가져가서 동작해서 내어주기때문에 정확한 경로를 webpack.config.js 는 모른다.
따라서 상대경로로 쓴다면 정확하지않다. 그래서 ${__dirname}/dist 이나path.resolve를 이용해서 절대경로로 알려준다.
참고) ${__dirname}는 NodeJS의 전역변수이다. 그래서 현재파일의 경로의 정보를 가지고 있을 수 있.
script
“dev”: “webpack serve —mode development” // 개발용
“build”: “webpack —mode production” // 제품용$ npm run build
dist 파일생기고, 빌드된 결과가 출력이 됨.
만약 다른 js파일(sub.js)이 또 생긴다면?
외부파일 가져오기
main.js랑 sun.js를 연결해줘야함
main.js에서 import “./sub.js”
sub.js는 export키워드가 없다. 나갈 출구가 없다는 뜻이다. 그래도 main.js 파일에 “./sub.js” 라고 입력하면 직접 가져오는건 아니고 내 자리로(main.js) 가져와서 실행만 해! 라는 개념인데 이렇게 써도 된다.
$ npm run build
웹팩이 main.js와 sub.js를 번들(합친다)해서 dist파일의 main.js 하나로 만들어준다.
HTML 파일을 자동으로 dist 폴더로 생성해주는 패키지
$ npm i -D html-webpack-plugin
const HtmlPlugin = require('html-webpack-plugin')// 웹펙폴더에서 찾는거임 경로없으면
module.exports = {
plugins: [
new HtmlPlugin({ // 플러그인 연결
template: './index.html' //경로 만들기
})
]
}루트 경로에 index.html 파일 생성
$ npm run build
자동으로 dist폴더에 index.html 파일이 생긴다.
난독화 된 HTML을 확인 할 수 있다.
난독화 해제: Alt + Shift + F
