웹팩 정리

기준 : v4.41

강의 노트 : Introduction | 웹팩 핸드북 (joshua1988.github.io)

npm((Node Package Manager)) : js 라이브러리를 관리할 수 있는 공개 저장소

 

npm을 사용하는 이유

1. 프로젝트에서 사용하는 라이브러리 버전과 의존성 관리

2. 라이브러리 설치 용이

 

npm init -y : package.json 생성

 

npm 설치

npm install something --global

로 하면, node_modules 폴더가 아닌 %USERPROFILE%\AppData\Roaming\npm\node_modules 에 설치됨.

 

dependencies(배포용 라이브러리)와 devDependencies(개발용 라이브러리)

전자는 애플리케이션의 로직과 연관있는 라이브러리, 최종 애플리케이션 코드 안에 포함

ex) react, vue, chart etc.

후자는 개발을 할 때 도움을 주는 개발용 보조 라이브러리

ex) webpack, js-compression, sass

 

Webpack 이란? 모듈 번들러이다. (Module Bundler)

애플리케이션을 구성하는 자원(HTML, CSS, JPEG 등)들을 모두 각각의 모듈로 보고 이들의 연관 관계를 파악해 하나의 결과물로 만들어내 내는 도구

 

 

Webpack의 등장 배경

1. 파일 단위의 자바스크립트 모듈 관리의 필요성(파일 단위로 변수를 관리하고 싶은 욕구)

2. 웹 개발 작업 자동화 도구 (Web Task Manager)

3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

 

Webpack으로 해결하려는 문제 4

1. 자바스크립트 변수 유효 범위

2. 브라우저별 HTTP 요청 숫자의 제약

3. 사용하지 않는 코드의 관리

4. Dynamic Loading & Lazy Loading 미지원

 

 

devtool: 'source-map'

빌드하기 전 결과물과 빌드한 후 결과물(난독화) 파일을 연결해 준다.

 

// webpack.config.js

module.exports = {
	entry: '번들링을 하기 위한 최초 진입점',
    output: '번들링한 결과물 떨구는 경로',
    module: {
    	'entry와 output의 사이에 개입하는 속성'
    },
    loader: '웹팩이 번들링할때 js가 아닌 자원(font, css etc)들을 변환할 수 있도록 도와주는 속성',
    plugin: ''
}

 

module

var path = require('path');

module.exports = {
    mode: 'none',
    entry: './index.js',
    output: {
        filename:'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 모든 css 파일에 대해서
                // 오른쪽 부터 실행
                use: ['style-loader', 'css-loader', 'sass-loader'] // 아래 로더를 적용하겠다
            }
        ]
    }
}

loader 가 없으면 뜨는 에러

"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."

자바스크립트가 아닌 파일에 대해서, 웹팩 안으로 변환할 수 있게 뭔가를 적용해줄 수 있는 속성이 로더이다.

 

 

plugins : 결과물에 대한 정보를 바꾸는 역할의 속성

var path = require('path');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'none',
    entry: './index.js',
    output: {
        filename:'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{loader: MiniCssExtractPlugin.loader},
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ]
}