WebPack 모듈 | 요람일지

WebPack은 자바스크립트 기반의 모듈 번들러입니다. 번들러는 서버의 자원을 효율적으로 사용하기 위해 여러 파일들을 하나의 묶음으로 만들어주는 작업입니다.

WEBPACK 사용법

1. 설치

npm install -D webpack webpack-cli css-loader style-loader html-webpack-plugin

webpack: 모듈 번들러

webpack-cli: cli에서 webpack 사용 명령어를 실행하게 해주는 커멘드 라인 도구

css-loader: css파일을 모듈로 취급하여 js,jsx에 포함시키는 로더

style-loader: dom에 <style>을 사용하여 css 속성을 부여하는 로더

html-webpack-plugin: html을 자동으로 수정해주는 플러그인

2. 실행

npx webpack : 번들링을 위한 실행 명령어

webpack.config.js : webpack을 설치할 때의 설정 파일

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: "./src/index.js", // 작성된 코드의 시작점이 되는 파일
  output: {
    path: path.resolve(__dirname, "dist"), // 절대경로로 설정된 번들링이 내보낼 위치
    filename: "app.bundle.js", // entry 파일의 번들링 버전 이름
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 정규표현식으로 작성된 변환할 파일 형식
        use: ["style-loader", "css-loader"], // 불러올 모듈 로더
        exclude: /node_modules/, // 제외할 파일 및 폴더
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ // 설치한 플러그인의 인스턴스
    template: path.resolve(__dirname, "src", "index.html") // 
  })]
};