webpack.config.js의 modules

modules의 @babel/preset-env

• 기본적인 modules

  module: {
    rules: [
      {
        test: /\.jsx?/, //js나 jsx파일에 어떤 rule을 적용한다.
        loader: "babel-loader", // 옛날 브라우저에서도 호환되게
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
        },
      },
    ],
  },

• 좀 더 복잡한 module

  module: {
    rules: [
      {
        test: /\.jsx?/, //js나 jsx파일에 어떤 rule을 적용한다.
        loader: "babel-loader", // 옛날 브라우저에서도 호환되게
        options: {
          presets: [
            ["@babel/preset-env", {
              targets : {
                browsers : ['> 5% in KR', 'last 2 chrome versions'],
              },
              debug : true,
            }]
            , "@babel/preset-react"
          ],
        },
      },
    ],
  },

좀 더 복잡하게 @babel/preset-env를 설정하는 이유

기본으로 실행할 경우 최신 코드를 옛날 모든 브라우저에서 적용시킬 코드로 만든다
이는 시간이 많이 걸리고 만약 어떤 대상까지만 지원한다고 설정하면 필요없는 시간도 줄이고 효율적으로 작업할 수 있다.

이를 위해 @babel/preset-env을 하나의 배열 묶어 만들어 구체적인 내용을 추가해준다

• preset-env가 각각의 브라우저에 맞게 알아서 최신문법을 처리 한다는 이유는 이를 통해 알 수 있다.
  (세심한 속성에서 브라우저 관련 처리 코드를 수행하기 때문에)

webpack.config.js의 plugins

확장프로그램 - webpack에서 적용하는 plugins와 다른 추가적으로 붙일 내용들
ex) new webpack.LoaderOptionsPlugin({ debug : true})