webpack으로 빌드하기 // 20210416

1. webpack 빌드 준비

• webpack실행하려고 터미널에 webpack이라고 바로 치면 에러나옴.
• webpack이 명령어로 등록되지 않았기때문.
• package.json에서 script에 'webpack'을 test명령어로 등록해주면 터미널에서 webpack명령어로 실행가능.

"scripts": {

 "dev" : "webpack"

}, 

• 이렇게 해주면 npm run dev 치면 webpack 실행
• 또는 앞에 npx를 넣어도 실행이 된다.

npx webpack

2. webpack 빌드

• npm run dev 또는 npx webpack을 실행하면 자동으로 webpack.config.js 내 정보를 읽고 app.js 를 생성함.
• entry파일을 사용해 output의 dist경로에 app.js를 생성.
• app.js를 참고하는 index.html을 실행시켜보면 err가 생겨서 실행이 안된다. 그 err를 해결해야 정상적으로 실행됨

• err를 읽을 수 있는 정도의 영어실력은 필요!

3. webpack jsx설정

• 위까지만 설정하고 npm run dev 해도 에러가 뜬다.
• 지금 err가 뜬 이유는 webpack에서 jsx를 읽지 못했기 때문. jsx를 읽게 하려면 babel 셋업이 필요함. 그리고 babel내에서도 jsx설치가 필요

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

core가 babel의 기본. preset-env는 사용자의 브라우저에 맞게 최신 문법을 예전 문법으로 바꿔줌. preset-react는 얘가 있어야 jsx 지원 가능. loader는 바벨과 웹팩을 연결해줌.

다 설치한 후에는 package.json 세팅.
= devDependencies로 바벨 설치값 이동.

  "devDependencies": {
    "@babel/core": "^7.13.15",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/preset-env": "^7.13.15",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "webpack": "^5.31.0",
    "webpack-cli": "^4.6.0"
  }

4. webpack.config.js 세팅

다 설치 및 세팅한 후에는 webpack.config.js 세팅
entry객체 밑에 module을 넣어준다.
entry로 파일을 읽고 module을 적용한 후 output으로 표시한다는 흐름으로 이해할 것.

module : {

  rules: [{ //모듈에 적용할 룰

    test : /\.jsx?/,   // 테스트 대상. 정규표현식 표현방법으로 js와 jsx를 지칭함. 정규표현식에 대한 공부 별도 필요. 많이 쓰인다고함.

    loader : 'babel-loader', //로더를 바벨로더로 적용하겠다. 로더는 최신 문법에 바벨을 적용해 옛날 문법으로 바꿔주겠다는 기능임.

    options : { //바벨의 옵션.

      presets : ['@babel/preset-env', @babel/preset-react'], //적용할 프리셋.

    },

  }],

},

이대로 실행하면 state 에러가 뜰거임. 그럼 에러 메시지대로 babel/plugin-proposal-class-properties를 추가해줘야 함. npm i -D @babel/plugin-proposal-class-properties

로 추가해준 후 presets 밑에 plugins 로

plugins : [@babel/plugin-proposal-class-properties],

를 추가해주면 정상적으로 작동함.