WEBPACK

모듈 번들러로 쉽게 말해 최신화 되어 있는 코드를 호환이 되는 버전으로 변환시켜주는 역할을 한다.

1. WEBPACK 설치

  • 웹팩을 설치하고 콘솔창에서 웹팩 실행할 수 있게 설치
  • assets 폴더 > js 폴더 > main.js
  • assets 폴더 > scss 폴더 > styles.scss

2. 서버와 프론트 나눠서 실행시키기 위한 작업

package.json

webpack.config.js 파일을 생성

  • entry (어느 파일을 받아서) / output (어디로 보낼 것인지) 으로 나눈다

-> npm run dev:assets

3. scss를 읽지 못해 아래와 같은 에러가 뜬다 -> 웹팩에게 rules 설정하기

webpack.config.js

package.json (npm install cross-env)

  • loader를 부여해서 웹팩에게 파일 처리하는 방법을 알려준다.
  • sass->css
    1. 확장자가 scss인 파일을 찾고
    2. scss->css로 바꾸고
    3. 그 css의 텍스트를 추출해서 파일로 만들기
  • const ExtractCSS = require("extract-text-webpack-plugin"); 이 변수가 있기 때문에 css를 가지고 뭘 어떻게 할지 알려줄 수 있다.
  • 웹팩의 config 파일은 아래에서 위로 진행한다.
  • postcss를 쓰면 autoprefixer를 통해 자동으로 브라우저마다 호환되는 css를 추가 기재해준다.

그리고 plugins : [new ExtractCSS("styles.css")] 통해 추출된 파일은

이 정보에 따라 이름이 주어지고 해당 폴더에 저장이 된다.

profile
허허벌판에 씨 뿌리기

4개의 댓글

comment-user-thumbnail
2019년 11월 8일

웹팩은 전부 이해할 필요는 없고 흐름만 읽을 줄 알면 된다고 해서 위안이 됐다...

답글 달기
comment-user-thumbnail
2019년 11월 8일

애먹은 에러 다시 기억하기

ERROR :
'WEBPACK_ENV'은 내부 또는 외부 명령 배치 파일이 아닙니다 오류
-> npm install cross-env 설치
-> "dev:assets": "cross-env WEBPACK_ENV=development webpack", 수정

답글 달기
comment-user-thumbnail
2019년 11월 8일

npm install @babel/polyfill

브라우저에 아직 없는 걸 채워주는 용으로 es2015 환경을 모방

답글 달기
comment-user-thumbnail
2019년 11월 22일

app 파일에서 /static 경로 사용 설정 필수
app.js

답글 달기