[React] 번들링과 웹팩

🦋 번들

• 여러제품,코드,프로그램을 묶어서 패키지로 제공하는 행위
• 프론트엔드에서 번들 : 사용자에게 웹 애플리케이션을 제공하기위한 파일묶음
• 번들링의 필요성 : 두개의 js에서 변수충돌, 번들파일사이즈를 줄여야함

🦋 웹팩

• 어플 배포를 위해 가장 많이 사용하는 번들러
• 여러개의 파일을 하나의 파일로 합쳐주는 모듈 번들러
• 모듈 번들러의 등장 : js코드양이 증가, 세분화 모듈파일이 증가했다. 모듈단위의 파일
• 웹팩에서의 모듈은 js외에도 png등등 다양한 파일을 번들링함
• 웹팩의 필요성 : 웹 어플의 빠른 로딩속도와 높은 성능을 위해서
• 웹팩이 있으면 같은타입파일은 묶어서 요청,응답 받을수있어 네트워크 코스트가 획기적으로 줄어듬
• 웹팩리더를 사용하면 ES6문법 안지원하는 브라우저에 ES5 문법 변환하는 babel-loader를 사용할 수 있게됨

웹팩의 핵심 개념

• 웹팩 핵심개념
• Entry
• Output
• Loaders
• Plugins
• Mode
• Browser Compatibility
  웹팩의 config 파일 예시

module.exports = {
  target: ["web", "es5"],  //target : 컴파일하는 환경, 기본값은 web
  entry: "./src/script.js", //entry : 프론트엔드 개발자가 작성한 코드의 시발점
  output: {
    path: path.resolve(__dirname, "docs"), // 생성된 번들을 내보낼 위치와 파일의 이름을 저장하는 방법을 웹팩에 알려주는 역할
    filename: "app.bundle.js",
    clean: true
  },
  module: {
    rules: [ // loader : 웹팩이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환해 애플리케이현에 사용하거나 디펜던시 그래프에 추가할 수 있음.
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [ //플러그인 : 번들을 최적화하거나 에셋을 관리하고, 환경변수 주입등의 광범위한 작업을 수행할 수 있게 됨.
    new HtmlWebpackPlugin({ 
      template: path.resolve(__dirname, "src", "index.html"),
    }),
    new MiniCssExtractPlugin(),
  ],
  optimization: {      // 선택항목에 따라 최적화실행함.
    minimizer: [
      new CssMinimizerPlugin(),
    ]
  }
};