Webpack

💡 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러

JS 크기 증가, 발생하기 쉬운 각 변수들 스코프, 호출 시 네트워크 코스트같은 복잡한으로 인해 모듈 번들러 등장

JS에만 국한되지 않고 HTML CSS .jpg 도 포함

• 빌드: 개발이 완료된 엡을 배포하기 위해 하나의 폴더(dir)로 구성하여 준비하는 작업 → React기준으로 index.html에 압축되오 배포에 최적화된 상태 제공

• 번들링: 파일(의존관계 import, export)을 묶는다 → 모듈 간의 의존성 관계를 파악해 그룹화 하는 작업

Webpack 필요성

홈페이지 증가 → 유저 이탈율 증가. 즉, webpack이 없다면 각각 파일을 요청하는 네트워크 코스트가 큼

그러나, webpack으로 이런 네트워크 코스트가 획기적으로 줄어듦

또한, ES6를 ES5로 변환시켜주는 babel을 사용할 수 있듯이 개발자 본인이 원하는 개발을 선택할 수 있게 지원

Webpack4 이상부터 Development, Production 모드 지원. Production은 코드 난독화, 압축, 최적화(Tree Shaking)작업 지원으로 쾌적한 환경 및 보안 지원

config 파일 모습

const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

/* JSON에 주석은 원래 안되 는 거임 */
module.exports = {
	// 1. Target
	/* 기본값은 'web'. 이외에도 다양한 환경을 넣을 수 있음. Browser Compatibility와 연관된 속성
	해석: 브라우저와 동일한 환경에서 작성된 코드를 es5로 컴파일하겠다 */
  target: ["web", "es5"], 
	
	// 2. Entry
	/* 입구, 기본값은 index.js. FE개발자가 작성한 코드의 '시작점'. 이 기준으로 직간접으로 의존하는 다른 모듈과 라이브러리를 찾아냄. 다중 entry point 가능  */
  entry: "./src/script.js",
	
	// 3. Output
	/* 생성된 번들을 내보낼 위치. 기본값은 ./dist/main.js. filename과 path속성을 줘서 이름과 내보낼 위치를 지정 */
  output: {
    path: path.resolve(__dirname, "docs"),
    filename: "app.bundle.js",
    clean: true
  },
	
	// 4. Loader
	/* 기본적으로 JS와 JSON만 인식, 그러나 다른 유형파일 필요시 이용. (아래 test와 use는 필수!)
		- test: 변환이 필요한 파일들을 식별하기 위한 속성
		- use: 변환을 수행하는데 사용되는 로더를 가리키는 속성
		- exclude: 바벨로 컴파일하지 않을 파일이나 폴더(반대 include는 뜻이 의미)
	*/
	
  module: {
    rules: [ // 여러개일 때 'rules' 하나는 'rule'
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },

	// 5. Plugin
	/* 먼저 require() 요청이 필요. new연산자로 인스턴스 생성 */
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
    new MiniCssExtractPlugin(),
  ],

	// 6. Optimization
	/* Webpack4 부터 최적화 실행 항목. 
		- minimize: TerserPlugin 또는 optimization.minimize에 명시된 plugins로 bundle 파일을 최소화(=압축)시키는 작업 여부를 결정
		- minimizer: defualt minimizer을 커스텀된 TerserPlugin 인스턴스를 제공해서 재정의
	해석: mini-css-extract-plugin 에 관련된 번들을 최소화하도록 지시
	*/
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ]
  }
};