이제 CSS를 적용할 로더를 도입해 보자
최종 폴더에 style.css 파일을 생성
body{ background-color: cadetblue; color: white; }
index.html에 css 적용
<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello webpack!</h1> <div id="root"></div> <script src="public/index_bundle.js"></script> </body> </html>
라이브 서버 실행 결과
위 처럼 css파일 추가와 페이지 스타일이 변경된 것을 확인할 수 있다.
여기서 아쉬운점은 자바스크립트 파일은 번들링 되어있지만 css파일은 번들링 되지 않은점을 확인할 수 있다.
웹팩은 스타일도 하나의 번들링된 자바스크립트 파일로 번들할 수 있다.
여기서 로더란 자바스크립트가 아닌 png나 css파일을 번들링 해주는 역할을 한다.
우선 터미널을 통해 해당 명령어로 로더를 설치해 준다.
npm i -D css-loader style-loader
pakage.json
{
"name": "template_wp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.5.1",
"style-loader": "^3.3.1",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
}
}
pakage.json 파일 내에 CSS로더와 스타일 로더가 추가된 것을 확인할 수 있다.
webpack.config.js 설정파일 수정
설정파일에
output 다음으로 module을 생성한다.
const path = require('path');
// 파일의 경로를 쉽게 핸들링 해줄 수 있게 도와주는 일종의 부품이라 생각한다.
module.exports = {
mode: "development",
//개발
entry: "./source/index.js",
// 도입할 .js 위치
output: {
path: path.resolve(__dirname,"public"),
// dist 라는 하위 경로에 최종적인 경과물을 "public"에 놓아라
filename: 'index_bundle.js'
},
module: {
rules:[
// 모듈을 처리하는 규칙
{
test: /\.css$/,
// 웹팩을 통해서 가공하는 여러가지 데이터중 CSS확장자 파일 처리하는 방식을 알려주고 싶다
use: ['style-loader', 'css-loader']
// 웹팩을 동작시켰을때 확장자가 CSS인 파일을 만나면 웹팩이 알아서 해당 CSS파일을 웹팩 안으로 로드시켜준다.
}
]
}
}index.html에 내에 head 태그와 안에 내용들 삭제
<html> <body> <h1>Hello webpack!</h1> <div id="root"></div> <script src="public/index_bundle.js"></script> </body> </html>
index.js파일내용 수정
(최종 디렉토리 폴더에 있는 style.css를 source 안으로 이동시킨다)
import hello_word from './hello.js';
// 수입하다 변수명 어디서? 해당루트
import world_word from './world.js';
// 수입하다 변수명 어디서? 해당루트
import css from './style.css';
// 수입하다 변수명 어디서? 해당루트
document.querySelector('#root').innerHTML = hello_word + ' ' + world_word;
// 도큐먼트에 요소선택(아이디태그 root).HTML내 내용추가
console.log('css', css);
// 콘솔로그를 통해 css를 번들링 했는지 확인터미널에 아래 명령어 입력
npx webpack
입력한 뒤 브라우저 개발자 모드를 통해 콘솔로그로 css 확인
(원래는 undefined가 뜨면 안된다.)
- element를 보면 이전에 index.html 파일에 head를 포함하지 않았으나 head태그와 style태그 안에 이전에 우리가 작성한 css 코드가 가공되어 있다.
public 폴더에 css파일이 없이 index_bundle.js 파일에 자바스크립트 형식으로 번들링 된 것을 확인할 수 있다.
해야되요