웹팩

웹팩이란 ?

• 여러개의 나누어져 있는 자바스크립트 파일들을 하나의 파일로 만들어주는 라이브러리
• 자바스크립트 코드들을 압축하고 최적화 할 수 있기 때문에 로딩 속도를 높일 수 있다.

실습

필요 라이브러리를 먼저 설치

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader clean-webpack-plugin css-loader html-loader html-webpack-plugin mini-css-extract-plugin css-loader file-loader style-loader webpack webpack-cli webpack-dev-server

웹팩으로 자바스크립트 파일 빌드하기

• webpack.config.js 파일 생성 및 작성

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  outout: {
    filename: 'bundle.js',
    path: path.resolve(__dirname + '/build'),
  },
};

• entry : 웹팩이 빌드할 파일을 알려주는 역할
• output : 웹팩에서 빌드를 완료하면 output에 명시되어 있는 정보를 통해 빌드 파일을 생성
• mode : 웹팩 빌드 옵션
  • production : 최적화되어 빌드함
  • development : 빠르게 빌드
  • none : 아무 기능 X

package.json 파일에서 스크립트 추가

"scripts": {
    "build": "webpack"
}

웹팩으로 HTML 파일 빌드하기

• 웹팩은 자바스크립트 파일뿐만 아니라 자바스크립트가 아닌 파일들도 모듈로 관리할 수 있다.

module: {
    rules: {
        test: '가지고올 파일 정규식',
        use: [
            {
                lodaer: '사용할 로더 이름',
                options: {사용할 로더 옵션}
            }
        ]
    }
}

• 프로젝트에서 사용한 모듈들

 module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: '/node_modules/',
        loader: 'babel-loader',
        options: {
          configFile: './babel.config.js',
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(png|gif|svg|jpe?g)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          publicPath: '/',
        },
      },
    ],
  },

• babel-loader : 최신 사양의 자바스크립트 코드를 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링)
• file-loader : 파일을 로딩
• MiniCssExtractPlugin.loader : 자바스크립트에 포함된 CSS를 별도의 파일로 추출해준다.
• css-loader : css 파일을 자바스크립트로 변환

plugin 적용

• 웹팩으로 변환한 파일에 추가적인 기능을 더하고 싶을 때 사용한다.
• loader vs plugin 차이점
  • loader는 파일을 해석하고 변환하는 과정에 관여하여 모듈을 처리
  • plugin은 해당 결과물의 형태를 바꾸는 역할을 하므로 번들링된 파일을 처리한다는 점

 plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    new MiniCssExtractPlugin({             filename: 'app.css' })
]

• CleanWebpackPlugin : 빌드 이전 결과물을 제거하는 플러그인으로 빌드 결과물은 웹팩에서 아웃풋 경로에 설정한 곳으로 폴더 및 파일들이 모이는데 빌드 했을시 이전 빌드내용이 삭제되지 않고 그대로 남아있는 경우도 있는데, 이를 해결해주는 플러그인
• HtmlWebpackPlugin : 번들한 CSS, JS 파일을 각각 HTML 파일에 Link, Script 태그로 추가해줘야하는데, 이 부분을 자동화 해주는 플러그인
• MiniCssExtractPlugin : CSS를 별도의 파일로 추출하는 플러그인

webpack-dev-server

• 빠른 실시간 리로드 기능을 가진 개발 서버

  • 디스크에 저장되지 않는 메모리 컴파일을 사용

• 동작 원리

  • 서버 실행 시 소스 파일들을 번들링하여 메모리에 저장소스 파일을 감시
  • 소스 파일이 변경되면 변경된 모듈만 새로 번들링
  • 변경된 모듈 정보를 브라우저에 전송
  • 브라우저는 변경을 인지하고 새로고침되어 변경사항이 반영된 페이지를 로드

• 속성

  • host : 사용될 호스트
  • hot : webpack HMR 기능 활성화
    • HMR : 브라우저를 새로 고치지 않아도 웹팩으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정입니다.
  • port : 접속 포트
  • overlay : 에러가 발생했을때 브라우저에 풀스크린으로 에러 내용을 오버레이로 표시해주는 옵션
  • historyApiFallback : HTML5의 History API를 사용하는 경우에 설정해놓은 url 이외의 url 경로로 접근했을때 404 responses를 받게 되는데 이때도 index.html을 서빙할지 결정하는 옵션

resolve

• 웹팩이 알아서 경로나 확장자를 처리할 수 있게 도와주는 옵션

resolve: {
    extensions: ['.js', '.jsx'],
},

출처

• https://velog.io/@jeff0720/React-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD%EC%9D%84-%EA%B5%AC%EC%B6%95%ED%95%98%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-Webpack-%EA%B8%B0%EC%B4%88
• https://medium.com/@yoohl/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%9B%B9%ED%8C%A9-%EC%84%B8%ED%8C%85-c1faee344735
• https://velog.io/@adam2/webpack-dev-server-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0%EC%82%BD%EC%A7%88%ED%9B%84%EA%B8%B0
• https://www.zerocho.com/category/Webpack/post/58aa916d745ca90018e5301d