webpack 정리

webpack공식사이트

webpack이 뭐죠?

webpack은 모듈 번들러입니다.

번들?, 번들러?

번들링(bundling)

모듈 번들링은 (html에 들어가는) 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식입니다

번들러(bundler)

Browserify, Webpack, Rollup등과 같은 하나에 파일로 통합해주는 것입니다.

번들(bundle)

모든 의존성이 묶여있는 파일(js)입니다.

 

위에 내용을 정리하면

webpack은 많은 자바스크립트 파일을 하나로 만들어주는 방식(도구)입니다.

 

구지 번들링을 이용해서  js파일을 모아줄 필요가 있나요?

물론 직접 html에서 script tag를 이용해서 불러도 됩니다.

 

그러나

 

요즘 트렌드는 react, vue같이 하나에 html 파일에 모든 걸 때려 넣는(?) SPA 방식이 주로 이용됩니다.

물론 이렇게 되었어도 하나에 js파일에 다른 js파일들을 호출해서 하는 것도 가능합니다만..

그렇게 되면 여러가지 문제가 발생하게 됩니다!

1. js파일을 불러오는 시간 때문에 성능이 감소함
2. 각 파일간에 변수 & 함수의 충돌할 위험 있음.

 

webpack을 사용법

• entry(엔트리)
• output(아웃풋)
• loaders(로더)
• plugin(플러그인)
• mode(모드)
• browser Compatibility(브라우저 호환성)

entry

• 의존성 그래프의 시작점을 웹팩에서는 엔트리(entry)라고 한다.
• 엔트리 포인트는 webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용해야 하는 모듈입니다.
  • 해당 파일을 통해 애플리케이션에서 사용되는 모듈들의 연관 관계를 이해하고 분석하기 때문에 애플리케이션을 동작시킬 수 있는 내용들이 담겨 있어야 합니다.
• webpack은 엔트리 포인트가 (직간접적으로) 의존하는 다른 모듈과 라이브러리를 찾아냅니다.
• 여러 개의 entry가 존재할 수 있습니다.
• Default value: "./src/index.js"
• webpack 설정에서 entry 속성을 설정하여 다른 (또는 여러 엔트리 포인트)를 지정할 수 있습니다.

module.exports = {
  entry: './src/index.tsx',
};

output

output 속성은 웹팩을 돌리고 난 결과물의 파일 경로를 의미합니다.

• 기본 출력 파일의 경우에는./dist/main.js
• 생성된 기타 파일의 경우에는./dist 폴더로 설정됩니다.

module.exports = {
  entry: './src/index.tsx',
	output: {
	    path: path.join(__dirname, '/dist'),
	    filename: 'bundle.js',
	},
};

loaders

• webpack은 기본적으로 JavaScript와 JSON 파일만 이해합니다.
• Loader는 다른 Type의 파일을 Webpack이 이해하고 처리 가능한 모듈로 변환시키는 작업을 담당합니다

module.exports = {
  entry: './src/index.tsx',
	output: {
	    path: path.join(__dirname, '/dist'),
	    filename: 'bundle.js',
	},
	module:{
		rules: [
      { test: /\.tsx$/, use: 'ts-loader' }
    ]
	}
};

plugin

• https://webpack.kr/plugins/ webpack이 제공하는 기본 플러그인들
• 로더가 파일 단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다.
• 번들을 최적화, 난독화, 특정 텍스트를 추출, 애셋을 관리하고, 또 환경 변수 주입할 수 있다

module.exports = {
  entry: './src/index.tsx',
	output: {
	    path: path.join(__dirname, '/dist'),
	    filename: 'bundle.js',
	},
	module:{
		rules: [
      { test: /\.tsx$/, use: 'ts-loader' }
    ]
	},
	plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

mode

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

module.exports = {
  entry: './src/index.tsx',
	mode: 'development',
	output: {
	    path: path.join(__dirname, '/dist'),
	    filename: 'bundle.js',
	},
	module:{
		rules: [
      { test: /\.tsx$/, use: 'ts-loader' }
    ]
	},
	plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};