Webpack - module

Root 경로의 css파일을 읽어 오는 방법

 

폴더 및 파일 생성

main.css

body {
  background-color: skyblue;
}

 

main.js 파일에 css파일을 연결한다.

// root 경로의 css파일을 main.js 파일로 가져온다.
// 그렇게 되면 webpack이 실행될때 처음 main.js파일을 읽어서 가져오기 때문에 dist 폴더에 css 파일이 생성된다.
// js파일의 현재 위치를 기준으로 css파일을 찾기때문에 상위로 이동해서 찾도록 설정
import '../css/main.css'

webpack.config.js 파일에서 진입점 확인

webpack자체는 css 파일을 읽어 올 수 없기 때문에 현재는 dist 파일에 css 파일을 생성해 주는 정도의 기능만 제공한다.

따라서 css파일을 읽을 수 있는 패키지를 설치해 주어야 한다.

 

명령어:  npm i -D css-loader style-loader

packge.json  파일에서 확인

webpack.config.js 파일에서 module.exports 안에 output 뒤에 설정

 module: {
    rules: [
      {
        // .css파일을 찾도록 하는 정규표현식
        test: /\.css$/,
        use: [ // 먼저 css-loader가 읽히고 style-loader가 동작한다. 순서가 중요하다.!!
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

use 부분의 순서가 중요하다.

뒤에 plugin 설정이 되어있기 때문에 쉼표(,) 를 작성해준다.

 

실행: npm run dev

 

브라우저 확인