Archive

JS Day 18 Webpack

28 Jun 2021 | Javascript

JS Day 18 Webpack

1. 웹팩이란

웹팩이란 React, Vue, Angular 등 최신 FE 프레임워크에서 가장 많이 사용되는 모듈 번들러이다.

모듈 번들링은 웹 앱을 구성하는 자원들을 하나의 파일로 병합 및 압축해주는 동작이다.

웹팩은 자바스크립트만을 위한 도구가 아니다. HTML, CSS, Javascript, Image, Font 등 웹 애플리케이션과 관련된 모든 모듈을 위한 것이다.

webpack


2. 웹팩의 필요성

  1. 파일 단위의 자바스크립트 모듈 관리
    • script로 자바스크립트를 불러와서 사용할 경우, 변수명이 중복되었을때 의도와 다르게 동작할 수 있다.
    • 모듈 단위로 자원을 뜯어서 관리하면 필요할때마다 불러서 사용할 수 있다.
  2. 웹 개발 작업 자동화
    • HMR (Hot Module Replacement) - 새로고침 없이 런타임 시점에 업데이트가 가능하다.
  3. 빠른 로딩 속도와 높은 성능
    • 자원을 미리 로딩하는게 아니라 그때그때 요청하여 성능을 향상시킬 수 있다.


3. 웹팩으로 해결하려는 문제

  1. 자바스크립트 변수 유효범위
  2. 브라우저별 HTTP 요청 숫자의 제약
    • 여러 파일을 병합하여 HTTP 요청 숫자를 줄여 성능을 향상시킬 수 있다.
  3. 사용하지 않는 코드의 관리
  4. Dynamic Loading & Lazy Loading 미지원
    • 웹팩의 Code Splitting 기능을 이용하여 모듈을 원하는 타이밍에 로딩할 수 있다.


4. 주요 속성

  1. entry : 웹팩에서 웹 자원을 번들링하기 위한 최초 진입점. 웹팩이 디펜던시 그래프를 생성하기 위해 사용.

    // webpack.config.js
module.exports = {
    entry: './src/index.js'
}
   
// 배열 형태로 전달하여 다중 엔트리 구문 사용 가능
module.exports = {
    entry: ['./src/index.js', './src/index2.js', '...']
}
   
// 멀티 페이지 애플리케이션에 적합한 다중 엔트리 구문
module.exports = {
    entry: {
        main: './src/main.js',
        login: './src/login.js' 
    }
}


  2. output : 웹팩 번들링 후 결과물이 위치할 파일 경로. filename 속성과 path 속성 지정이 필요.

    // path는 core Node.js의 모듈이다
var path = require('path');
   
module.exports = {
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    }
}
    • 둘 이상의 엔트리 포인트, 코드 분할, 다양한 플로그인을 통해 여러 번들을 생성할 경우 고유이름 지정 방법

    filename: '[name].bundle.js : 결과 파일 이름에 entry 속성을 포함

    filename: '[id].bundle.js' : 결과 파일 이름에 웹팩 내부적으로 사용하는 모듈ID를 포함

    filename: [contenthash].bundle.js : 생성된 콘텐츠에서 생성된 해시 포함

    filename: [chunkhash].bundle.js : 청크의 모든 요소를 포함한 청크의 해시

  3. loader : Javascript, Json 파일 이외의 자원을 유효한 모듈로 변환하여 애플리케이션에서 사용

    module.exports = {
    module: [{
        test: /\.m?js$/, // 로더를 적용할 파일 유형 (정규표현식 사용)
        exclude: /(node_modules|bower_components)/,
        use: { // 해당 파일에 적용할 로더의 옵션
        	loader: 'babel-loader',
        	options: {
        		presets: ['@babel/preset-env']
    		}
    	}
    }]
}

    module: {
    rules: [
        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }
    ]
}


  4. plugin : 플러그인은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성이다.

    • 플러그인에는 생성자 함수로 생성한 인스턴스만 추가할 수 있다
    module.exports = {
    plugins: [
        new HtmlWebpackPlugin(), // 웹팩으로 빌드한 결과물로 HTML 파일 생성
        new webpack.ProgressPlugin() // 웹팩의 빌드 진행율을 표시
    ]
}

5. Dev Server

웹팩 데브 서버에서 실행하면 코드 변경 후 새로고침 없이 브라우저에 새로운 코드가 적용된다.

매번 빌드할 필요가 없기 때문에 개발 환경에 필수적인 도구이다.

npm install --save-dev webpack-dev-server 패키지 필요

package.json의 scripts에 dev server로 실행할 'webpack serve' 명령어 기입이 필수

webpack.config.js에서 devServer의 설정이 가능하다.

module.exports = {
    devServer: {
        port: 9000,
    }
}

dev server에서 작업한 내용은 build하기 전까지 실제 파일로 저장되지 않는다. (메모리에 올려 실행하기 때문)

따라서 작업 완료 후 build하여 결과물을 파일로 생성해야한다.


  • HMR 설정 : devServer 옵션에서 Hot Module Replacement 설정이 가능하다.
module.exports = {
    devServer: {
        hot: true
    }
}


참고 자료

Webpack

웹팩 핸드북

Related Posts