웹팩 설정하기(3)
이번 글에서는 웹팩 설정을 계속해서 설명하겠습니다.
1) 다음과 같이 2줄의 코드를 추가해줍니다.
(1) const ExtractCSS = require('extract-text-webpack-plugin")
: 설치한 extract-text-webpack-plugin 모듈을 사용할 수 있습니다.
(2) use: ExtractCSS({})
: SCSS로 끝나는 어떤 모듈을 만나게 되면 사용해야 하는 플러그인입니다.
2) use: ExtractCSS({})의 내부에는 또 3개의 plugin을 사용합니다.
여기에 plugin을 사용하는 이유는 SCSS 파일을 일반적인 CSS파일로 바꿔야 하기 때문입니다.
이 때, 주의할 점은 3개의 plugin이 아래에서부터 위로 실행된다는 점입니다.
하나씩 설명드리겠습니다.
sass-loader: Sass 혹은 SCSS를 받아서 일반 CSS로 바꿔줍니다.
postcss-loader: css를 받아서 우리가 주는 plugin을 받아서 CSS로 변환해줍니다.
예를 들어, '인터넷 익스플로러와 호환되게 만들자!'라고 할 수 있습니다.
즉, CSS 호환성 관련된 걸 해결합니다.
css-loader: 마지막으로 css-loader를 이용하면 Webpack이 CSS를 이해할 수 있게 됩니다.
잘 호환되는 순수한 CSS가 불러와지면 우리는 딱 그 부분만 추출해서 어딘가로 보냅니다.
3) 실제 플러그인을 사용하기 위해서는 npm install ~ 을 통한 설치가 필요합니다.
4) 이 중 postcss를 좀 더 자세히 살펴보겠습니다.
postcss를 사용하면 많은 플러그인을 같이 사용할 수 있습니다.
그림에서의 예시처럼,
:fullscreen {} 을 쓰면 autoprefixer를 통해서
:-webkit-:full-screen {}과 :-moz-full-screen {}을 만들어줍니다.
각각은 구글 크롬,사파리 와 파이어폭스에서 작성한 코드가 돌아갈 수 있도록 해줍니다.
5) 실제로 autoprefix를 설치해서 활용해보겠습니다.
npm install autoprefix를 통해서 autoprefix를 설치합니다.
6) const autoprefixer = require("autoprefixer")를 추가한 후,
loader: "postcss-loader"의 밑에
새로운 옵션을 추가합니다. 이제 이 옵션에 autoprefixer와 관련된 내용들을 구현할 것입니다.
7) autoprefixer에 browsers: "cover 99.5" 라는 코드를 추가했습니다.
이는 즉, 99.5%의 브라우저를 커버하도록 한다는 것입니다.
8) const config의 제일 밑에 plugins: [new ExtractCSS("styles.css")]를 추가해줘야 합니다.
이것을 추가해줘야 하는 이유는 실제 CSS 파일을 extract할 때,
만들어질 파일명을 지정해줘야 하기 때문입니다.
9)npm install node-sass 를 통해서 node-sass 패키지를 설치해줍니다.
10) npm run dev:assets 를 통해 실행하면,
main.js와 styles.scss가 성공적으로 built 되었음을 확인할 수 있습니다.
11) 그리고 static 파일의 main.js와 styles.css로 이동하면
파일의 내용을 확인할 수 있습니다.
12) 마지막으로 scss 파일들이 어떻게 css파일로 통합되는지 확인해보겠습니다.
우선, 이전에 컴파일했던 static 폴더를 지운 후,
scss폴더에 config 폴더를 새로 만들고, _variable.scss 파일을 새로 만듭니다.
_variable.scss 파일에는 다음과 같은 코드를 추가합니다.
13) 그리고 styles.scss에서 해당 파일을 import한 후,
선언했던 변수 $bgColor를 활용합니다.
14) 그 다음 npm run dev:assets를 실행하면,
static 폴더가 컴파일되고,
다음과 같은 styles.css 파일이 만들어짐을 확인할 수 있습니다.
"다음은 노마드코더(https://academy.nomadcoders.co/)의 [초급 풀스택] 유튜브 클론 코딩 강의를 참고하였습니다."