Webpack을 사용할 때 기본적으로 node_modules의 의존성은 빌드 결과물에 포함됩니다. 웹 앱용 번들을 만들 때는 유용한 동작이지만, Webpack으로 라이브러리나 Node 애플리케이션을 빌드하는 경우와 같은 일부 사용 사례에서는 런타임에 node_modules에서 로드되도록 이러한 의존성을 제외하고 싶을 수 있습니다.

Webpack의 externals 옵션을 사용하면 빌드에서 제외할 의존성을 지정할 수 있습니다. 모든 의존성을 제외하려면 webpack-node-externals를 이용해 프로젝트의 node_modules 디렉터리에 있는 모든 의존성을 제외하는 externals 함수를 간단하게 만들 수 있습니다.

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

module.exports = {
    ...
    // ignore all modules in node_modules
    externals: [nodeExternals()],
    ...
};

우리의 사용 사례

Mintel에서는 디자인 시스템을 구성하는 프론트엔드 라이브러리 모음을 보유하고 있습니다. 로컬 개발에는 Storybook을 사용하며, 라이브러리와 Storybook의 빌드 과정 차이 때문에 엔지니어들이 변경 사항을 개발하는 과정에서 문제를 놓치는 경우가 종종 있었습니다.

이러한 문제를 더 빨리 발견하기 위해 플랫폼 팀은 라이브러리와 Storybook의 빌드 과정을 통합하기로 했으며, 동일한 Webpack 설정으로 Storybook과 배포되는 라이브러리 모두를 빌드하도록 했습니다.

하지만 이러한 변경으로 인해 해당 라이브러리를 사용하는 애플리케이션의 번들 크기가 커졌습니다. 라이브러리가 빌드 시 모든 의존성을 함께 패키징하면서 공유 의존성이 중복되었기 때문입니다. Webpack 빌드에서 의존성을 제외함으로써 의존성 해석을 다시 사용하는 쪽 프로젝트로 끌어올리고 패키지 매니저가 본래 역할을 하도록 할 수 있었습니다.