12.22공부 프론트엔드 시작
브라우저에서 구동되는 자바스크립트 작성하기
back-end에서 node.js에 최신버전 자바스크립트를 작성하면 babel-node로 구버전 자바스크립트로 컴파일 했다면
fron-end에서는 node.js에 webpack의 babel-loader을 이용하여 컴파일한다.
두개다 패키지들 package.json에서 관리
보통 webpack을 직접 설정하지않고 이미 포함되어있는 툴을 쓴다.ex) react, react Native vue, sevelte
Webpack
scss--> css, 최신 javascript --> 구버전 javascirpt, jpg -> 압축 jpg
보통 react,vue등을 다룰때 webpack은 뒤에서 깔려서 활동하고 따로 설정을 할 필요는 없다.
1.webpack설치 npm i webpack webpack-cli -D //--save-dev의 축약
2.webpack.config.js생성
구 문법 자바스크립트만 이해한다.
import 사용 못하고 const hi = require처럼 사용
최신 node.js코드인
export default x
module.exports={} 사용
webpack 필수조건
1.entry :소스코드, 우리가 처리하고자는 파일 = 최신 자바스크립트
2. output
webpack.config.js
const path = require("path")
module.exports ={
entry: "./src/client/js/main.js", //바꿀파일
mode: 'development', //모드에 대한 경고가 계속 뜨는데 prodocution은 모든 파일을 압축해 개발 중에 main.js파일읽기힘듬
output:{
filename: "main.js", //변환 후 파일명
path:path.resolve(__dirname,"assets","js"), //변환 후 경로
}
}
dirname: directoryname 파일까지의 전체경로
path.resolve: 경로 만들어줌
package.json
"scripts": { 명령어 짧게 사용하기위한 것 scripts
"dev": "nodemon -L --exec babel-node src/init.js",
"assets":"webpack --config webpack.config.js" //webpack사용하기 위해
},
npm run assests 실행하면
assets > js >main.js 폴더, 파일이 생성됨
그러나 아직도 브라우저와 호환되지 않는 코드가 있어
bable 이용 할 것임 프론트엔드 관련된 모든 코드는 webpack.config.js에서 이루어짐
rules -> 각각 파일의 종류에 따라 어떤 전환을 할 건지 정하는 것
1. npm i -D babel-loader 바벨로더 설치
2.module:{
rules:[ // 어떤 파일 종류에 따라 어떤 처리를 할 것인지 여러 룰이있기 때문에 배열로
{
test:/＼.js$/, //js파일을
use:{
loader: 'babel-loader', //babel- 로더 이용하여 변경
options: {
presets: [
['@babel/preset-env', { targets: "defaults" }]
]
}
}
}
]
}
Webpack converting New JS to Old JS.
Webpack is running the 'loaders' which are the ones transforming the code.
/＼.js$/ = RegExp 정규표현식
정규표현식에선 .가 분류 커맨드이므로 그냥 .을 쓸려면 ＼..을 해줘야 된다.
따라서 ＼.js는 .js이다
Webpack 시작하기: https://webpack.kr/guides/getting-started/
Webpack 설정: https://webpack.kr/concepts/configuration/