웹팩

Hwang Tae Young·2022년 12월 14일
0
post-thumbnail

이전 게시글을 다시 보니,,, 부족한 점이 많다는 걸 느꼇다.
왜 쓰는지 이런 것들은 나름,,,? 정리 한 것 같지만 웹팩 설정을 할때 중요한 핵심 개념들을,
웹팩 공식문서에서는 Concepts라고 하는 것의 설명을 하나도 작성하지 않았다!!
그래서 그것들에 대해 내가 이해한 만큼 적어보려한다.

웹팩에는 6가지 주요 개념들이 있다.

  • Entry
  • Output
  • Loaders
  • Plugins
  • Mode
  • Browser Compatibility

webpack 버전 4.0.0 이후로는 프로젝트 번들링을 위한 설정파일은 따로 필요하지 않다고 한다.
그래도 사용자가 원한다면 유연하게 설정은 가능하다고한다.
웹팩 공식문서에는 위의 개념만 안다면, 원하는설정을 할 수 있다고 한다.

📌 Entry

엔트리 포인트는 webpack이 내부의 디펜던시 그래프 를 생성하기 위해 사용해야 하는 모듈입니다.
Webpack은 엔트리 포인트가 (직간접적으로) 의존하는 다른 모듈과 라이브러리를 찾아냅니다.
기본값은 ./src/index.js이지만, webpack 설정에서 entry 속성을 설정하여
아래와 같이 다른 (또는 여러 엔트리 포인트)를 지정할 수 있습니다.

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};

공식문서에서는 위와같이 나와 있다. 엔트리는, 디펜던시 그래프를 생성하는 지점을 잡기 위해서인데
디펜던시 그래프는 하나의 파일에서 다른 파일을 임포트 해오는, 연관관계가 있는 것들 끼리의
그래프를 그리는 것이라고 이해했다. 그리고 엔트리라는 개념은 이 그래프를 그리기위한 최상위 파일을
의미하는 것 같다. 흔히 우리가 React에서 최상위 파일로쓰이는 index.js를 생각하면 될 것 같다.

📌 Output

output 속성은 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할을 합니다. 기본 출력 파일의 경우에는 ./dist/main.js로 , 생성된 기타 파일의 경우에는 ./dist 폴더로 설정됩니다.
다음과 같이 설정에서 output 필드를 지정할 수 있습니다.

webpack.config.js

const path = require('path');
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

위의 예제에서, output.filename과 output.path 속성을 사용하여 webpack에 번들의 이름과 내보낼 위치를 알려주었습니다. 상단에서 가져오는 path 모듈이 무엇인지 궁금할 수 있는데, 이것은 파일 경로를 지정하기 위해 사용되는 core Node.js 모듈입니다.

output은 cra로

yarn build	

을 실행했을 때와 같이 동작하는 번들링이 다된, 완성품을 만들어줄 폴더와 파일명을 지정해주는 옵션이다.

아래 이부분은

const path = require('path') 
상단에서 가져오는 path 모듈이 무엇인지 궁금할 수 있는데,
이것은 파일 경로를 지정하기 위해 사용되는 core Node.js 모듈입니다.

이라고 하는데, core Node.js 모듈은 이미 Node에 포함되어있는 모듈을 뜻한다고 한다.
그렇기에 path를 임포트 해올때 따로 파일 경로를 지정해주지 않는다.

📌 Loaders

webpack은 기본적으로 JavaScript와 JSON 파일만 이해합니다. 로더를 사용하면 webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환 하여 애플리케이션에서 사용하거나 디펜던시 그래프에 추가합니다.

Warning
webpack의 특정 기능 중 하나인 모든 유형의 모듈(예: .css)을 import 하는 기능은 다른 번들러나 태스크 러너에서 지원하지 않을 수 있습니다. 개발자들에게 더욱 정확한 디펜던시 그래프를 생성하는 데 도움을 주기 때문에 이러한 언어의 확장이 필요하다고 생각합니다.

상위 수준에서 로더는 webpack 설정에 두 가지 속성을 가집니다.

변환이 필요한 파일(들)을 식별하는 test 속성
변환을 수행하는데 사용되는 로더를 가리키는 use 속성

webpack.config.js

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

위 설정에서는 test와 use라는 두 가지 필수 속성을 가진 하나의 모듈을 위해 rules 속성을 정의했습니다.
이는 webpack의 컴파일러에 다음과 같이 말합니다.

"이봐 webpack 컴파일러, require ()/import 문 내에서 '.txt' 파일로 확인되는 경로를 발견하면 번들에 추가하기 전에 raw-loader를 사용하여 변환해."

Warning
webpack 설정에서 규칙을 정의할 때 rules가 아닌 module.rules 아래에 정의한다는 것을 기억하세요.
당신의 편의를 위해 webpack은 잘못 정의한 경우에 경고를 합니다.

Warning
정규식을 사용하여 파일을 매칭할 때 따옴표를 사용하지 않도록 주의하세요. 즉,

/\.txt$/는 '/\.txt$/' 또는 "/\.txt$/"와 같지 않습니다.

전자는 webpack에 .txt로 끝나는 모든 파일과 일치하도록 지시하고 후자는
webpack에 절대 경로 '.txt'를 가진 단일 파일과 일치하도록 지시합니다.
이는 당신의 의도한 것이 아닐 가능성이 높습니다.

더 상세한 사용자 지정 설정에 대해서는 로더에서 확인하실 수 있습니다.

로더는, 설명에 쓰여있는데로 웹팩이 컴파일 하기 전에 rules 안의 test에 쓰여진 형식들을
use에 설정되어있는 로더를 사용하여 컴파일 하는 것이다.
주의할점으로는 사용자의 편의로 rules를 정하는 것이 아닌, module.rules아래 정해진 형식으로 정의를 하라는 것 으로 이해했다.
그리고 확장자 명을 설정할때는 "(쌍따옴표)나 '(따옴표)를 사용하지 않아야 한다.

📌 Plugins

로더는 특정 유형의 모듈을 변환하는 데 사용되지만, 플러그인을 활용하여 번들을 최적화하거나,
애셋을 관리하고, 또 환경 변수 주입등과 같은 광범위한 작업을 수행 할 수 있습니다.

Tip
플러그인 인터페이스를 사용하여 webpack의 기능을 확장하는 방법을 확인해보세요.

플러그인을 사용하려면 require ()를 통해 플러그인을 요청하고 plugins 배열에 추가해야 합니다.
대부분의 플러그인은 옵션을 통해 사용자가 지정할 수 있습니다. 다른 목적으로 플러그인을
여러 번 사용하도록 설정할 수 있으므로 new 연산자로 호출하여 플러그인의 인스턴스를 만들어야 합니다.

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 내장 plugin에 접근하는 데 사용

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

위의 예제에서 html-webpack-plugin은
생성된 모든 번들을 자동으로 삽입하여 애플리케이션용 HTML 파일을 생성합니다.

Tip
webpack은 설치 없이 사용할 수 있는 많은 플러그인을 제공합니다! plugin 목록을 확인해보세요.

webpack 설정에서 플러그인을 사용하는 것은 간단하지만,
추가로 실제 사용 사례들도 살펴볼만한 가치가 있습니다. 여기에서 자세히 알아보세요.

설명에 쓰여 있는데로, 웹팩에서 번들을 최적화하거나 에셋(이미지 등등)관리, 환경 변수 주입
등등 여러 용도로 쓰인다고 한다. 지금은 웹팩을 겉할기 식으로만 해서 그런지, 다양한 플러그인은 아직은 모르겠다.

📌 Mode

mode 파라미터를 development, production 또는 none으로
설정하면 webpack에 내장된 환경별 최적화를 활성화 할 수 있습니다.
기본값은 production 입니다.

module.exports = {
  mode: 'production',
};

여기에서 모드 구성에 대해 자세히 알아보고 각 값에서 어떤 최적화가 수행되는지 알아보세요.

세가지 모드가 있고, 위에 링크에 자세하게 써있다.
개발용, 배포용, 아무것도 없는 것 그리고 해당 모드별로 웹팩의 설정파일을
나누는 방법도 있는데, 그건 나중에,,,,!

📌 Browser Compatibility

Webpack은 ES5가 호환되는 모든 브라우저를 지원합니다(IE8 이하는 지원되지 않습니다).
Webpack은 import() 및 require.ensure()을 위한 Promise를 요구합니다.
구형 브라우저를 지원하려면 이러한 표현식을 사용하기 전에 폴리필을 로드해야 합니다.

얘는,,, 잘 모르겠다,,,,? 호환을 위해 Polyfill을 로드 해야한다는데, 이걸 정확히 모르겠다,,, 보류!

📌 Environment

Webpack 5는 Node.js 버전 10.13.0 이상에서 실행됩니다.

제일 중요한 것! node.js 10.13.0버전 이상에서만 웹팩이 동작한다고 한다!!

출처 : 웹팩 공식문서

📌 마무리하며

사실상 웹팩 공식문서를 복붙해 온것에 지나지 않았지만, 참고해야하는 링크들을 조금씩 타고
들어가다 보니,,,,, 진짜 내가 다른사람들의 블로그 글을 보고 Cra없이 했던 것들은 정말 복붙만 한거구나 라고 느끼고 있다,,,,
그래도 다시 복습아닌 복습을 하면서 많이 배운 것 같고,,,, 빠른 시일내로 더 깊게 공부한 뒤
더 세세한 설정으로 무언가 만들어보고싶다!

profile
더 나은 개발자가 되기 위해...☆

0개의 댓글