20.5.2 웹팩과 babel 플러그인 적용

    Loadable Components에서 제공하는 웹팩과 babel 플러그인을 적용하면 깜박임 현상을 해결할 수 있습니다.

    먼저 babel 플러그인을 적용해 보겠습니다. package.json을 열어서 babel을 찾은 뒤, 그 안에 다음과 같이 plugins를 설정하세요.

    package.json – babel

    "babel": {
        "presets": [
          "react-app"
        ],
        "plugins": [
          "@loadable/babel-plugin"
        ]
      }

     

    webpack.config.js를 열어서 상단에 LoadablePlugin을 불러오고, 하단에는 plugins를 찾아서 해당 플러그인을 적용하세요.

    webpack.config.js

    const LoadablePlugin = require('@loadable/webpack-plugin');
    (...)
    plugins: [
          new LoadablePlugin(),
          (...)

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.