3. webpack - 모듈 설정(CSS 연결)

1. 모듈 사용 방법

- 아래의 작업을 진행하면, index.html에서 link태그를 이용해 설정해놓은 css 연결부분을 삭제해야한다.

a) main.js 파일을 이용한 CSS 파일 연결 

• 이전 포스팅에서 static 폴더에 생성하면 static부분의 경로를 생략하고 dist에서 읽어드릴 경로로 작성했다.
• 이번에는 static 폴더를 사용하지 않고 main.js 파일을 이용하여 파일을 연동하는 방법을 배울 것이다. 
• 먼저, 루트 경로에 css 폴더를 만들고 그 안에 main.css라는 파일을 만들자.
• main.css 에는 body 태그의 배경색을 변경하는 내용을 적었다.  
• 그리고 main.js 파일에서 main.css 파일을 import 해준다. 

- webpack.config.js 파일 안에서 entry 지점을 main.js로 설정해 놓았기 때문에 main.css 파일을 읽을 수 있다. 

- main.js 를 우선적으로 읽고 index.html 과 합쳐서 나중에 빌드를 할 때 dist 폴더안에 함께 저장되는 방식이다. 

 

 

b) webpack 자체는 CSS 파일을 읽을 수 없다.

• webpack은 html과 CSS 파일을 합쳐줄 수 는 있어도 CSS 자체를 이해하는 능력이 없다.
• css-loader 와 style-loader 패키지 설치를 통해서 이를 해결할 수 있다.
• 터미널 입력: npm i -D css-loader style-loader

 

c) webpack.config.js 설정

• 이전에도 진행했던 것 처럼, 새로운 패키지를 설치했으니 명시해줘야 한다.

// import
const path = require('path') // node 모듈을 import 해오는 기본방법 
const HtmlPlugin = require('html-webpack-plugin') // webpack plugin 모듈 가져오기 
const CopyPlugin = require('copy-webpack-plugin')

// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정 
  entry: './js/main.js', 

  //결과물(번들)을 반환하는 설정 
  output: {

    clean: true // 덮어쓰기 기능 속성 
  },

  module: {
    rules: [
      {
        test: /\.css$/, // .css 확장자를 갖는 파일을 찾는 정규표현식
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },

  // 번들링 후 결과물의 처리방식 등 다양한 플러그인 사용을 위한 구성요소 추가 
  plugins: [ 
    new HtmlPlugin({ // 생성자를 이용한 플러그인 생성 
      template: './index.html' // 템플릿 연결 
    }),
    new CopyPlugin ({
      patterns: [
        { from: 'static' } // static 폴더 안의 내용이 dist로 복사되어 들어가도록 한다. 
      ]
    })
  ],

  devServer: {
    host:'localhost'
  }
} 

 

• module 라는 속성값 부분을 살펴보자.
• use에 방금 설치한 패키지를 명시하였는데, 패키지가 명시된 순서가 중요하다. 하나씩 알아보자.

 

d) css-loader

• style-loader와 css-loader 패키지 두개를 설치하였다. 이 중에서 먼저 해석되는 패키지는 css-loader이다.
• css-loader는 자바스크립트에서 import한 css 파일을 해석할 수 있도록 하는 기능을 갖는다.
• 위에서 진행한 과정을 보면, main.js 파일에서 css 파일을 import해서 읽도록 하고 있다.
• 자바스크립트에서는 원래 css 파일을 이해할 수 없기 때문에, css-loader 패키지 설치를 통해서 이를 가능하게 한 것이다.

 

e) style-loader

• css-loader를 통해 JS에서 css파일을 해석할 수 있게 되었다. 이제 해석한 css파일을 어떻게 사용할 것이냐가 관건이다.
• main.js 해석한 css 파일의 내용을 index.html의 style 태그에 삽입해야 하는데, 이를 style-loader가 수행하게 된다. 
• webpack.config.js 파일에 style-loader가 먼저 명시된 후 css-loader를 명시해야 함을 잊지 말자. 

 

f) 확인하기 

• 터미널에 입력: npm run dev
• 로컬 경로로 들어가서 css가 잘 적용되었는지 확인하자.