웹팩 설정하기

11932 단어 웹팩웹팩

웹팩

웹팩이란 ?

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

실습

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

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'],
},

출처

좋은 웹페이지 즐겨찾기