참고사이트 : webpack

1. Mode?

• 기본값모드(개발자모드) development
• 배포되는모드 production
• 아무것도 세팅하지않은 모드 none
  방향성에 따라 모드를 선택할 필요가 있다.

<!--webpack.config.js 파일 안에서 모드 선택 가능-->
module.exports = {
mode: "development"
}

webpack.config.prod.js 같이 배포용 파일을 하나 더 만들어서
개발용,배포용 선택해서 작업 가능

2. Loader?

로더는 모듈의 소스 코드에서 적용되는 변환이다. import나 로드를 통해 파일들을 전처리 할 수 있다. 그러므로 로더는 다른 빌드 툴들의 "tasks" 와 유사하며, 프론트엔드 빌드 과정을 처리하는 강력한 방법을 제공한다. 로더는 (TypeScript 같은) 다른 언어를 자바스크립트로 변경하거나 인라인 이미지를 data URL로 변경할 수 있다. 심지어 로더는 CSS파일을 자바스크립트 모듈에서 직접 import 할 수 있는 방법도 제공한다. 
출처: https://ibrahimovic.tistory.com/52 [Web Standard:티스토리]


여러가지 파일들을 번들링해서 간단하게 만들어주는것 : 번들러
웹팩은 js파일뿐만이 아닌 css나 여러 파일들을 번들링 해주는 여러 loader가 존재

css-loader / style-loader

• css-loader : css파일을 읽어와서 webpack으로 가져오는 loader
• style-loader : 가져온 css코드를 웹페이지 안에 style태그안에 주입하는 loader
  뒤쪽에 있는 loader가 먼저 동작함( chaining )
  수많은 로더들

<!--css-loader/style-loader설치-->
npm install -D css-loader style-loader
<!--webpack.config.js 모듈추가
style-loader와 css-loader 순서에 주의-->
module: {
rules: [
  {
    test: /\.css$/,
    use: ["style-loader", "css-loader"],
  },
],}

<!--index.js 파일에 import
주의! 번들링 할떄 index.js 파일과 같은 폴더로 이동-->
import css from "./style.css";

출처 : 생활코딩