Bundler[Webpack] - module

01.module

• 프로젝트에 css 파일을 통해 스타일을 적용해보도록 하겠습니다.
• webpack은 두 가지 방법을 제시하고 있습니다.

02.static 폴더

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

2-1.index.html

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

• webpack을 통해 자동으로 dist 폴더안에서 해당 파일을 찾습니다.

2-2.main.css 파일 생성

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

2-3.개발 서버 오픈

$ npm run dev

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

03.루트 경로

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

3-1.main.css 파일 생성

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

3-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 파일이 읽힐 수 있는 구조가 되는 것입니다.

3-3.외부 패키지 설치 & 확인

$ npm i -D css-loader style-loader

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

package.json

"devDependencies": {
    "copy-webpack-plugin": "^9.1.0",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.0.0-rc.1"
  }

3-4.module 옵션 추가

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

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

webpack.config.js

// import
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

// export 
module.exports = {
  // parcel index.html
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./js/main.js",
  // 결과물(번들)을 반환하는 설정
  output: {
    // path: path.resolve(__dirname, "dist"), // dist의 절대경로를 반환
    // filename: "main.js",
    clean: true
  },

  module: {
    rules: [
      {
        test: /\.css$/, // .css확장자로 끝나는 파일을 찾는 정규 표현식
        use: [
          "style-loader", // index.html의 style 태그에 해석된 내용을 삽입하는 패키지
          "css-loader" // main.js에서 CSS 파일을 해석하는 패키지
        ]
      }
    ]
  },
  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인을 설정
  plugins: [
    new HtmlPlugin({
      template: "./index.html"
    }),
    new CopyPlugin({
      patterns: [
        { from: "static" } // static 폴더안에 있는 내용들이 복사되어 dist폴더 안에 들어갈 수 있게 설정하는 옵션
      ]
    })
  ],

  devServer: {
    host: 'localhost'
  }
}

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

3-5.개발 서버 오픈

npm run dev

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