웹팩 간단 정리

웹팩 왜 쓰나?

보통 자바스크립트 코드를 html에 넣을땐 <script src="./file.js"> 태그를 이용한다. 만약 file.js에서 a 라는 변수를 선언했으면 a 변수는 어디서든 접근 가능하게 된다. 그렇기 때문에 전역 스코프가 오염되지 않도록 하기 위해서는 자바스크립트 모듈 시스템을 사용해야한다.

일부 브라우저에서는 script 태그에 type="module" 이라고 줌으로써 모듈 시스템을 이용한다.

type="module" 이라고 해줌으로써 브라우저가 main.js는 모듈 시스템을 이용한다고 알게끔해주고 이제 main.js 에서는 import 해오는 것이 가능하게 된다. 참고로 export default가 아닌 그냥 export 들은 { } 로 감싸야한다.

 nodejs 에서는 require과 exports로 가능하고 ES2015에서 나온 표준 모듈 시스템은 import와 export로 한다. 근데 이러한 방식은 모든 브라우저가 지원하는건 아니다. 그놈의 ie ㅋㅋㅋ 위의 동일한 코드를 ie에서 열어보겠다.

......ㅎㅎ 그래서 ie에게 모든 브라우저에게 모듈 시스템을 지원해주기 위해서 웹팩이 등장한다.

웹팩은 모듈간의 의존관계를 싹 다 묶어서 하나의 파일로 만들어준다.

가장 상위의 파일(모듈이 시작되는 부분, 엔트리)을 찾아서 하위의 파일들을 하나로 통합하는 번들링 이라는 작업을 해주는 것이다.

 

이 밑에 있는애가 Node.env.process 그건가? mode??

설치는 간단하게 npm i -D webpack webpack-cli 하면 된다.

entry { main } : 엔트리의 위치
path : 웹팩 결과물 생성 경로
filename : 결과물 파일 이름

entry 파일은 여러개일 수 있다. 이런 경우에는 

이렇게만 해주면 된다. output 결과파일의 이름은 [name].js 로 해주었으므로 output 파일은 각각 main.js main2.js 가 될 것이다. entry의 키값이 name으로 정해진다.

 

로더 

웹팩을 통해 css든 img 파일이든 모두 번들링 하기 위해서는 로더를 사용해야한다. 

webpack.config.js 파일에서 로더는 이렇게 설정한다.

rules에 배열 형태로 값을 넣어주는데 css 형식의 파일에 대해서 use 배열에 명시해둔 로더들을 역순으로 적용해준다.
css-loader를 통해서 자바스크립트 코드안에 css 코드를 넣어주고 style-loader는 js 안에 들어가있는 스타일 코드를 html에 넣어줌으로써 CSSOM이 만들어지도록 해준다.

이미지 파일을 처리하기 위해서는 위의 rules 배열에 로더 설정을 추가해주면 된다.

.png 형식의 파일들을 처리해주기 위한 로더를 위와같이 설정한다. options에다가 publicPath를 줘서 저 경로에다가 파일로더가 처리한 파일을 넣어주도록 한다. name 옵션에는 hash를 줘서 캐시 무력화를 해준다. (매번 파일명이 달라져서 클라이언트 측에서는 캐시된 파일을 버리고 새로 받음)

test 에는 처리해줄 파일 형식을 정규표현식을 입력해주는데 .jpg 형식의 파일도 처리하려면 (png|jpg) 이런식으로 해주면 된다. (정규표현식 공부를 좀 해야겠다)

file-loader 보다 더 좋은 로더가 url-loader이다. url-loader는 file-loader를 포함하고 있다. 파일 크기가 일정크기 이하면 base64로 간단하게 처리하고 그 이상이면 file-loader에게 맡긴다. 

      {
        test:/\.(jpg|png|gif)$/,
        loader : 'url-loader',
        options : {
          publicPath : './',
          name : '[name].[ext]?[hash]',
          limit : 20000, //20kb 미만은 url-loader에서 base64로 변환. 이상은 url 로더가 파일을 복사.
        }

 

플러그인

로더는 파일하나하나에 적용하는 거였다면 플러그인은 번들링이 끝난 파일에 추가적인 작업을 해주는 것이다.

한 이쯤 위치한다고 봐야겠다

플러그인의 종류로는 js 파일에 배너를 넣어주는 BannerPlugin, 운영과 개발환경에 따라서 환경변수를 설정해주는 DefinePlugin, CSS 파일을 별도로 뽑아주는 MiniCssExtractPlugin, 웹팩의 빌드 과정에 html 파일도 포함시켜주는 html-webpack-plugin 등이 있다. html-webpack-plugin의 기본 템플릿은 ejs이다.

 

관련글

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD/dashboard

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의