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(),
      (...)

---