Webpack 기초 개념 정리

인프런 프론트엔드 개발환경의 이해와 실습 강의(Webpack)를 듣고 정리해봤다.

역할

모든 브라우저에서 모듈 시스템을 지원하지 않기 때문에 브라우저에 상관없이 모듈을 사용하게 하기 위해 여러개의 파일을 하나의 파일로 합쳐주는 번들러인 Webpack이 등장했다.

설정하기

webpack.config.js 파일을 생성 후 기본 설정을 할 수 있다.

const path = require("path")

module.exports = {
  mode: "development",
  entry: {
    main: "./src/app.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve("./dist"),
  },
}

• mode : 개발, 상용("production") 등의 모드를 지정해준다.
• entry : 번들할 때 진입하는 파일의 주소
• output: 번들 결과물의 위치, 이름 등

빌드하기

package.json 파일의 scripts에 build 명령어를 추가해준다.

{
  "scripts": {
      "build": "webpack --mode=production --progress"
  }
}

--를 활용해 모드, 진행 상태를 보는 등 여러 동작, config를 설정할 수 있다.

로더

다른 언어를 JS로 변환하거나, 이미지, CSS파일 등을 JS에서 직접 로딩할 수 있게 해준다. 번들할 때 각 파일에 대해 로더가 작동하여 변환해준다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // .css 확장자로 끝나는 모든 파일
        use: ["css-loader"], // css-loader를 적용한다
      },
    ],
  },
}

확장자와 어떤 로더를 사용할 지를 명시해주면 된다.

자주 사용하는 로더

• css-loader : css를 모듈로 변환

• style-loader : js로 변경된 css를 dom에 동적으로 적용해준다.

• file-loader : 소스코드에서 사용하는 모든 파일을 모듈로 사용하게 해준다. ex: 이미지 등

• url-loader : 이미지를 Base64로 인코딩해 문자열 형태로 소스코드에 넣는다. 작은 이미지는 이로 처리해주는 게 좋다.

  {
  test: /\.png$/,
  use: {
    loader: 'url-loader', // url 로더를 설정한다
    options: {
      publicPath: './dist/', // file-loader와 동일
      name: '[name].[ext]?[hash]', // file-loader와 동일
      limit: 5000 // 5kb 미만 파일만 data url로 처리
    }
  }
  }

플러그인

번들된 결과물에 특정 처리를 한다. 난독화, 특정 테스트 추출, 배너 추가 등

자주 사용하는 플러그인

• BannerPlugin : 배너(빌드 정보, 커밋 버전 등) 추가

• DefinePlugin : 환경정보를 제공해준다. 또는 새로운 변수를 소스코드에 주입할 수 있다. 빌드 타임에 결정되는 값을 app에 넘겨주고 싶을 때 쓴다.

  console.log(process.env.NODE_ENV) // "development"

• HtmlWebpackPlugin : html파일을 후처리하는데 사용, 빌드 타임 값 넣거나 코드 압축, 웹팩으로 빌드한 결과물 자동으로 로딩하는 html파일 생성 , 옵션을 통해 빈칸, 주석 등을 제거할 수 있다. hash 옵션을 통해 브라우저에 배포가 즉각 반영하게 해줄 수 있다. (캐시로 인해 즉각 배포 안되는 현상)

• CleanWebpackPlugin : 이전 빌드 결과물을 제거

• MiniCssExtractPlugin : CSS를 별도 파일로 뽑아냄, 브라우저에서는 여러 파일을 동시에 다운로드 하는 것이 하나의 큰 파일을 다운로드하는 것보다 빠르다.

웹팩 개발 서버

webpack-dev-server는 개발환경에서 개발 서버를 제공해준다.

{
  "scripts": {
    "start": "webpack-dev-server"
  }
}

webpack.config.js에서 개발서버 관련 설정을 할 수 있다.

devServer: {
    client: {
      overlay: true
    },
    // TODO: 여기에 api 서버 프록싱 설정을 추가하세요
    hot: true,
  },
  // ... 생략

• overlay : 빌드시 에러, 경고 브라우저 화면에 표시
• hot: 핫로딩 여부 -> 코드 변경사항이 바로바로 반영

API 연동

setupMiddlewares를 활용해 목업 api를 설정해줄 수 있다. 개인적으로는 msw등 잘 나와 있는 라이브러리를 사용해주는 게 더 좋다고 생각한다.

핫 모듈 리플레이스먼트

변경된 모듈만 새로고침해준다. 해당 인터페이스를 구현한 로더만이 핫 로딩을 지원한다. style-loader, react-hot-loader, file-loader등이 지원해준다.

최적화

production 모드

--mode=production로 빌드하면 다양한 플러그인을 기본적으로 사용한다.

• FlagDependencyUsagePlugin
• FlagIncludedChunksPlugin
• ModuleConcatenationPlugin
• NoEmitOnErrorsPlugin
• OccurrenceOrderPlugin
• SideEffectsFlagPlugin
• TerserPlugin
  빌드해보면 번들 결과물이 확실히 작아진다.

optimiaztion 속성으로 최적화

module.exports = {
  optimization: {
    minimizer: mode === "production" ? [ew TerserPlugin({
              terserOptions: {
                compress: {
                  drop_console: true, // 콘솔 로그를 제거한다
                },
              },
            }),new OptimizeCSSAssetsPlugin()] : [], // CSS 최적화
  },
}

코드 스플리팅

코드를 쪼개서 다운로드 속도를 높인다.

1. entry를 여러개로 분리

   // webpack.config.js
   module.exports = {
   entry: {
    main: "./src/app.js",
    controller: "./src/controller.js",
   },
   }

2. SplitChunksPlugin을 활용해 쪼개진 코드들의 중복을 예방한다.

   // webpack.config.js:
   module.exports = {
   optimization: {
    splitChunks: {
      chunks: "all",
    },
   },
   }

3. 다이나믹 임포트를 활용한다.

   function getController() {
       return import(/* webpackChunkName: "controller" */ "./controller").then(m => {
        return m.default
       })
   }
   document.addEventListener("DOMContentLoaded", () => {  
       getController().then(controller => {  
           controller.init(document.querySelector("#app"))  
       })  
   })

​ 빌드 시 자동으로 파일이 분리된다. 또한 단일 엔트리를 유지할 수 있다.

externals

써드파티 라이브러리의 경우 패키지 제공시 빌드 된상태다. 따라서 빌드 프로세스에서 제외하는 것이 좋다.

// webpack.config.js:
module.exports = {
  externals: {
    axios: "axios",
  },
}

CopyWebpackPlugin을 활용해 node_modules의 해당 라이브러리를 복사해온다.

const CopyPlugin = require("copy-webpack-plugin")

module.exports = {
  plugins: [
    new CopyPlugin({patterns: [
      {
        from: "./node_modules/axios/dist/axios.min.js",
        to: "./axios.min.js", // 목적지 파일에 들어간다
      },
    ]}),
  ],
}

정리

webpack은 모든 브라우져에서 모듈을 활용하기 위해 모듈들을 하나의 코드로 합쳐주는 (번들링) 도구이다.
다양한 로더, 플러그인을 활용해 번들 중 , 번들 후에 여러 처리를 할 수 있다.
webpack 공식문서에 다양한 로더, 플러그인 정보가 올라와 있다.
webpack-dev-server를 활용해 개발 서버를 구축할 수 있다. HMR을 활용해 변경된 부분만 새로고침되게 할 수 있다.
웹팩 최적화를 할 수 있다. 1) mode=production 2) optimization 설정 3) 코드 스플릿 4) 써드파티 라이브러리는 externals로 옮겨 빌드 과정에서 제외

추후 더 공부할 것

CRA 없이 리액트 개발환경 세팅하기, webpack bundle analyser를 활용해 번들 결과물 보고 최적화하기