[webpack]웹팩(webpack) 설정하기(2)

 

 

✔️ 속성

entry : 진입점 (기본적으로 webpack config js 파일은 javascript 파일을 기준점으로 함)

output: 반환점 (결과물을 내보내는 역할)

• - path : 결과물들의 저장 위치 (폴더명)
• (주의 : 상대경로(./dist)와 같은 경로를 입력하면 안 됩니다. 꼭 절대경로를 입력할 것.)
• - filename : 진입점의 파일 name과 동일하게 적어줍니다. 여기서 만든 filename은 entry의 key 값이 됩니다.
• (여러개 만들수도 있습니다. 동적으로 file name을 결정할 땐 [filename].js를 입력해주세요. )

clean : 이전에 만들어진 파일들 제거(단,5.20 version 이상만 사용 가능합니다. document에 여러 속성 및 version이 적혀져있습니다.)

plugins : 번들링 후 결과물들의 처리 방식등 다양한 플러그인을 설정합니다.

 

---

 

* entry & output 생략시 기본적으로 알아서 생섭됩니다.

 

npm run build

- dist 폴더에 js 파일이 생성됩니다.

 

 npm run dev

(script webpack-dev-server 설정)

http://localhost:8080 page에 정상적으로 webpack이 html파일과 js 파일을 하나로 합쳐줍니다.

 

 

| webpack 설정 시 css issue

 

webpack은 css file을 읽을 수 없다. 단지 css파일을 합쳐서 내어줄뿐입니다.

따라서 외부 패키지를 설치해줘야 합니다.

 

( -D : 개발 의존성 모듈로 설치한다는 의미입니다.)

npm i -D css-loader style-loader

 

css-loader : js파일 안에서 import 를 통하여 css 파일을 가져오는 경우, 해당 js 파일에서는 css 파일을 해석할 수 없다.

따라서 css-loader를 webpack에 명시해줌으로써, 해석해줍니다.

 

style-loader : style loader가 css-loader를 통해 해석된 내용을 html에 삽입해주는 역할을 합니다.

 

 

주의 : webpack설정 시 순서를 명확하게 style-loader부터 작성하고, css-loader를 선언해야합니다.

 

 

| webpack 설정시 scss issue

 

scss 설정을 위해서는 2개의 의존성을 설치한다

npm i -D sass-loader sass

sass-loader : webpack에서 해당하는 scss파일을 읽어들입니다.

sass : 읽어들일 때 문법을 해석해줄 수 있는 sass module을 사용합니다.

 

 

또한 순서가 중요합니다.

 

 

 

webpack 공식 document

https://webpack.js.org/configuration/entry-context/#entry

Entry and Context | webpack