Webpack 사용하기

Sally·2022년 2월 27일

설치

우선 환경 설정을 위해서 웹팩 설치를 진행한다.

npm init - y
npm install webpack webpack-cli --save-dev

설치가 정상적으로 진행되었다면 package.json에서
아래와 같이 devDependencies에 "webpack-cli"라는 문구를 확인 할 수 있다.

webpack.config.js

webpack의 설정을 위해서 webpack.config.js 파일을 생성한다.

webpack에서의 꼭 알아야 하는 개념 중에는 entry와 output이 있다.
1. entry : webpack으로 압축할 대상 파일
2. output : webpack으로 처리된 파일이 향하는 곳

webpack.configs.js에서의 기본 설정

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/app.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "public"),
  },
};

path 는 현재 webpack.config.js가 속한 파일 주소를 알아내기 위한 수단이다.

module.exports내의 요소들
1. mode :webpack으로 만들어 지는 파일의 형식을 결정하는 곳이다. "development"의 경우 개발자를 위한 포멧팅
2. entry : webpack으로 압축할 파일이 위치한 주소
3. output - filename : webpack으로 생성될 파일의 이름
4. output - path : webpack으로 생성될 파일이 저장될 주소
path.resolve 의 첫번째 인자인 __dirname은 현재 webpack.config.js의 파일 주소를 가리키는 변수 , 두번째 인자인 "public"은 webpack으로 생성될 파일이 저장될 폴더의 주소

1 단계 실행

위의 과정 거치면 기본적인 설정은 끝나서 webpack을 동작시켜 볼 수 있다.

터미널에

npx webpack

을 입력하게 되면 위에서 설정했던 것 대로
public 폴더 아래에 bundle.js 파일로 webpack이 된 코드들이 저장된다.

css 와 html

위의 기본적인 설정들로 webpack을 돌릴 수 있다. 다만 css와 html까지 번들 하기 위해서는 추가적인 설치와 설정이 필요하다.

css 관련 설치

우선 css의 번들러를 도와줄 패키지인 style-loader와 css-loader를 설치해야한다.

npm install --save-dev style-loader css-loader

html 관련 설치

html 역시 번들러를 위해서 html-webpack-plugin를 설치 해야한다.

npm install --save-dev html-webpack-plugin

위의 명령어 대로 설치가 제대로 이루어 졌는지 package.json에서 아래와 같이 확인할 수 있다.

package.config.json에서의 추가 설정

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/app.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "public"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
};

package.config.json에서 추가된 요소들

module 내의 rule : rule은 이런식으로 압축해줘 라는 규칙을 정하는 곳이다.
rule 내의 test : 어떤 확장자를 가진 파일에 대한 rule인지 정하는 곳 위에서는 확장자가 css인 파일들을 가리킨다.
rule 내의 use : 앞서 설치한 style-loader와 css-loader 패키지들을 이곳에 적는다
plugins 의 new HtmlWebpackPlugin 의 template : html 파일을 webpack을 사용하여 압축할때 사용하는 변수를 설정하는 곳

이렇게 설정을 한 후 npx webpack 명령어를 통해 압축을 하면 안된다. css가 압축이 되지 않을 것이다.

css압축을 위해선, js 파일 (entry에 설정한 파일) 내에 css를 import 해야 정상적으로 css도 압축이된다.

참고로 html에서는 css를 호출할 필요 없고 entry로 설정한 js 파일만 import 해도 번들러 된 html에서 스타일링이 적용된다