이전 포스팅에서 웹팩이 무엇인지와
웹팩 초기 설정하는 방법을 알아보았습니다
혹시 못 보셨다면 아래의 포스팅을 참고해주세요.
그리고 웹팩에 관해 알아볼 것을 리스트로 정리해보았습니다
웹팩(Webpack) 공부 목차
- 웹팩 초기 설정 방법
- CSS & SASS 적용하기
- 현재 포스팅입니다
- Cache Busting an Plugins ( 캐시 무효화 )
- html-webpack-plugin 설치
- template 파일 생성
- Splitting Dev & Production
- webpack-dev-server
- 이미지 파일 적용하기 ( html-loader, file-loader )
- clean-webpack
- Extract CSS & Minify HTML / CSS / JS
- 바벨 설치하기
- 리액트 적용해보기
- Multiple Entrypoints & Vendor.js
- 여러 페이지별 파일을 번들링 하기
목차에 포스팅이 끝나면 내부 링크를 걸도록 하겠습니다
앞으로 많은 설정법을 통해 웹팩을 완벽하게 파헤쳐 봅시다!!
그럼 다시 본론으로 넘어가서
css적용 하기 이전에 우선 html과 필요한 js파일을 만들도록 하겠습니다
CSS적용 전 준비단계
src폴더에 app이라는 폴더를 만들어서
button.js와 color.js 파일을 생성해 줍니다
button.js
const btnChange = document.querySelector(".btn-change");
export { btnChange };
color.js
const cardTitle = document.querySelector(".card-title");
const changeColor = function (color) {
cardTitle.style.backgroundColor = color;
};
export { changeColor };
마지막으로 dist폴더 안에 index.html을 생성합니다
아래의 코드와 함께 말이지요!
index.html
<!DOCTYPE html>
<html lang="en">
<head>
......
</head>
<body>
<h1 class="card-title">웹팩 활용법</h1>
<button class="btn-change">버튼 변경</button>
<script src="main.js"></script>
</body>
</html>
생성하셨다면 아래와 같이
폴더가 만들어졌겠지요?
그럼 지금까지 현재의 html을 실행하게 된다면
웹팩(Webpack) CSS loader 설지 및 적용하기
그럼 이제 웹팩(Webpack)에
CSS를 적용하기 위해서는 CSS Loader 설치 및 적용이 필요합니다
아래 링크 주소에서 웹팩 Loader 종류와 CSS Loader 적용 방법을 확인해 봅시다
오른쪽 사이드 바에 공식문서가 링크가 있으니 들어가셔서
검색창에 loaders, css loader 검색하시면 확인하실 수 있습니다
Loader는 타입 스크립트와 같은 다른 언어를 자바스크립트로 변경하거나 이미지를 dataURL로 변경할 수 있습니다
CSS 파일을 자바스크립트 모듈에서 직접 import 할 수 있는 방법도 제공합니다
우선 라이브러리를 설치합니다
npm install style-loader css-loader --save-de
다음 webpack.config.js를 수정합니다
모듈의 오브젝트 객체는 외부 패키지를 사용할 경우에
test와 use를 사용해서 외부 패키 지명을 넣어 줍니다
이때 중요한 것은 패키지는 뒤에서부터 해석이 된다는 것들을 알고 계셔야 합니다.
그래서 css-loader를 불러온 다음에 style-loader에 적용하여 불러온다는 것을 기억하셔야 합니다.
그럼 아래의 코드로 변경해주세요
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
}
};
아래의 이미지에 보시면 css폴더가 보이시나요
그리고 하위 디렉터리 main.css가 생성된 것이 보이실 겁니다
생성해주고 main.css에는 아래와 같은 코드를 추가하시길 바랍니다
body {
background: yellow;
}
그렇게 되고 index.html을 실행하게 되면
아래와 같이 css가 적용된 화면이 노출됩니다
이것을 응용해서 SASS 적용해보겠습니다
SASS 적용하기
아래의 라이브러리를 추가해줍니다
npm install sass-loader node-sass --save-dev
그리고 아래의 코드처럼 sass-loader를 추가해주며
기존 css파일의 확장자명을 scss로 변경해줍니다
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
],
},
동작 순서는 sass-loader -> css-loader -> style-loader가 되니 참고하세요!
이렇게 CSS loader 설치와 활용 방법을 알아보았습니다
어떻게 보면 정말 간단한데 모르면 정말 힘들겠죠
앞으로 많이 남았으니 같이 힘내 봅시다
대모험은 아직 끝나지 않아서 갈길이 너무 멀고도 험난하네요
사실 끝나지 않을 모험이라는 것을 잘 알고 있지만
아무튼 파이팅 합시다
'IT_Web > Webpack' 카테고리의 다른 글
| 웹팩(Webpack) - 개발, 운영, 공통 파일 분리하여 관리하는 Webpack-merge 설치 및 활용 (0) | 2022.07.28 |
|---|---|
| 웹팩 실시간 코드 반영 및 Webpack file-loader 이미지 파일 적용하기 (0) | 2022.07.27 |
| 웹팩(Webpack) 번들링 파일 자동연결 기능 사용하기(캐시 무효화 문제 해결하기) (0) | 2022.07.26 |
| 웹팩(Webpack) 번들링 시 캐시 무효화 설정하기 (Cache Busting) (0) | 2022.07.25 |
| 자바스크립트 파일을 하나로 Webpack이 왜 중요하고 왜 웹팩을 알아야 할까? (0) | 2022.07.23 |