이렇게 했을 때 react, react-dom/server 같은 라이브러리를 import 구문으로 불러오면 node_modules에서 찾아 사용합니다. 라이브러리를 불러오면 빌드할 때 결과물 파일 안에 해당 라이브러리 관련 코드가 함께 번들링됩니다.

브라우저에서 사용할 때는 결과물 파일에 리액트 라이브러리와 우리의 애플리케이션에 관한 코드가 공존해야 하는데요. 서버에서는 굳이 결과물 파일 안에 리액트 라이브러리가 들어 있지 않아도 됩니다. node_modules를 통해 바로 불러와서 사용할 수 있기 때문이죠.

따라서 서버를 위해 번들링할 때는 node_modules에서 불러오는 것을 제외하고 번들링하는 것이 좋습니다. 이를 위해 webpack-node-externals라는 라이브러리를 사용해야 합니다. 이 라이브러리를 yarn 명령어를 사용하여 설치해 주세요.

$ yarn add webpack-node-externals

다음으로 이 라이브러리를 webpack.config.server.js의 상단에 불러와서 설정에 적용합니다.

config/webpack.config.server.js

const nodeExternals = require('webpack-node-externals');
(...)

module.exports = {
  (...)
  resolve: {
    modules: ['node_modules']
  },
  externals: [nodeExternals()]
};

---