module

이번에는 프로젝트에 css 파일을 통해 스타일을 적용해보도록 하겠습니다. webpack은 두 가지 방법을 제시하고 있으므로 각각 알아봅시다.

1. static 폴더

첫 번째는 static 폴더 내부에 css 폴더를 생성하여 연결하는 방법입니다.

1.1 index.html

<link rel="stylesheet" href="./css/main.css">

link 태그를 이용하여 연결해줍니다.

1.2 main.css 파일 생성

static 폴더 내에 css 폴더를 만들고 그 안에 main.css 파일을 생성해줍니다.

1.3 npm run dev

개발 서버를 오픈시켜 잘 연결되었는지 확인합니다.

2. 루트 경로

두 번째 방법은 루트 경로에 css 폴더로 연결합니다.

2.1 main.css 파일 생성

루트 경로에 css 폴더를 만들고 그 안에 main.css 파일을 생성해줍니다.

2.2 main.js import

import '../css/main.css'

main.js에 import 키워드를 통해 css 파일을 가져옵니다. 이는 webpack.config.js에 entry: './js/main.js'를 명시한 것처럼 webpack은 시행되면서 main.js 파일을 먼저 읽어나갑니다. 그렇기 때문에 import 키워드로 가져온 main.css 파일이 읽힐 수 있는 구조가 되는 것입니다.

2.3 외부 패키지 설치

그러나 webpack은 css 파일을 읽을 수 없으므로 문제가 발생하게 됩니다. 이를 해결하기 위해서 외부의 패키지를 설치해야 합니다.

$ npm i -D css-loader style-loader

2.4 module 옵션 추가

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }
  ]
}

webpack.config.js 파일에 module 옵션을 추가해서 위 내용을 코딩해줍니다.

use에는 설치한 패키지 이름을 명시해줍니다. 그리고 test에는 정규표현식을 사용합니다. /\.css$/는 .css 확장자로 끝나는 모든 파일을 찾는다는 의미의 정규표현식입니다. 이를 통해, .css로 끝나는 모든 파일들은 test라는 속성으로 매칭하여 설치했던 패키지를 사용(use)하는 것입니다.

use 옵션에 명시한 style-loader, css-loader는 해당 순서대로 반드시 작성해야합니다. css-loader가 먼저 실행되고 이는 main.js 파일에서 css 파일을 해석할 수 있도록 해주는 패키지입니다. 이렇게 해석된 내용을 style-loader가 index.html의 style 태그에 해석된 내용을 삽입해줍니다.

2.5 개발 서버 오픈

npm run dev로 개발 서버를 열고 확인하면, 프로젝트에 스타일이 잘 적용된 것을 볼 수 있습니다.