🙈 Prologue

회사에서 페이스북의 오픈소스인 docusaurus 를 이용해서 회사의 서비스들을 문서화하게 되었습니다. 그 과정에서 라이브 예제들을 작성하며 다양한 라이브러리들을 설치하게 되었는데, 라이브러리들 중에 wasm 로더가 따로 필요한 것도 있었고, esm 모듈 호환성 이슈가 있는 라이브러리들도 있었습니다. 이처럼 다양한 라이브러리들이 요구하는 웹팩 빌드 환경이 달라서 웹팩 설정을 커스터마이징 할 필요를 느끼게 되었고, 웹팩 설정을 커스터마이징 하며 특정 이슈에 대해 어떻게 대응해야 하는지를 알 수 있었습니다. 그래서 오늘은 크게 docusaurus의 커스텀 플러그인을 통해 웹팩 설정을 커스텀 하는 방식과, 어떤 웹팩 설정들을 어떠한 이유로 추가하였는지를 정리해보았습니다.

해당 글은 docusaurus 2.0.1, webpack 5.73.0 버전을 기준으로 작성되었습니다.

1. Docusaurus에 webpack 설정을 위한 커스텀 플러그인 만들기

Docusaurus에서 웹팩 설정을 커스터마이징 하기 위해서는 커스텀 플러그인을 만들어 가져와야 합니다. 이를 위해 일단 customWebpack5Plugin.js 파일을 만들어 커스텀 플러그인으로 사용할 모듈을 작성하였습니다. (관련 공식문서)

// customWebpack5Plugin.js
module.exports = function () {
  return {
    name: 'custom-docusaurus-plugin',
    // eslint-disable-next-line
    configureWebpack(config, isServer, utils) {
      return {
        resolve: {
          alias: {
            path: require.resolve('path-browserify'),
          },
          fallback: {
            crypto: require.resolve('crypto-browserify'),
            stream: require.resolve('stream-browserify'),
            buffer: require.resolve('buffer'),
            path: require.resolve('path-browserify'),
            fs: false,
            os: false,
            net: false,
            http: require.resolve('http-browserify'),
            https: require.resolve('https-browserify'),
            assert: false,
            url: false,
            util: require.resolve('util'),
          },
        },
      };
    },
  };
};

위와 같은 설정을 해 준 이유는 webpack5부턴 Node.js에 대한 자동 폴리필을 지원하지 않기 때문입니다.

관련 자료
webpack5에서 제외된 폴리필 목록
공식문서

그래서 사용하고자 하는 라이브러리에서 필요로 하는 polyfill옵션을 추가해주었습니다.

이렇게 커스텀 플러그인 모듈을 만들었으면 해당 플러그인을 로드해주어야 합니다. docusaurus.config.js 파일의 plugins필드에 해당 플러그인을 로드시켜줍니다.

// docusaurus.config.js
  .
  .
  .
  plugins: [
    // .. other plugins 
    [require.resolve('./customWebpack5Plugin.js'), {}],
  ],

이렇게 하면 커스텀 웹팩을 사용하기 위한 설정이 완료되었습니다! 이와 같은 포맷을 통해 다양한 웹팩 설정을 커스터마이징 할 수 있는데, 아래는 제가 필요한 라이브러리들을 설치하며 마주한 이슈들과 해결한 방식들을 이야기해보려 합니다.

2. 필요한 모듈을 로드하기 위한 웹팩 설정하기

➡️ [ERROR] ReferenceError: __dirname is not defined

처음 마주친 이슈는 위 이슈였습니다. @cosmjs/proto-signing, @cosmjs/amino, @cosmjs/stargate 라이브러리를 설치하고 발드하는 과정에서 위와 같은 오류를 만났는데, nodejs 환경에서 __dirname이 정의되어 있지 않은 것이 이슈였습니다. 그래서 이에 대해 공식문서를 참고하여 아래와 같은 설정을 추가하였습니다.

        node: {
          __dirname: true,
        }

➡️ Module not found: Error: Can't resolve 'a' in node_modules/argon2-browser/dist/argon2.wasm

argon2-browser 라이브러리를 설치하는 과정에서 위와 같은 에러를 마주하였습니다. 일단, webpack5에서는 wasm loader를 experiments로 지원해주고 있어 (관련 공식문서) 아래 설정을 추가해주었습니다.

        experiments: {
          asyncWebAssembly: true,
        }

이 설정을 추가해주었을 때, argon2-browser 외의 라이브러리들에 대해서는 wasm load가 제대로 되는 것을 확인할 수 있었는데, argon2-browser 라이브러리에 대해서는 여전히 wasm 로드에 있어 위와 같은 에러가 떴습니다.
그래서 해당 라이브러리 코드를 보니, wasm파일을 로드할 때 base64-loader가 별도로 필요함을 알게되었습니다. 그래서 위 라이브러리에 대해서만 별도의 loader를 이용할 수 있도록 아래 설정을 추가해주었습니다.

	   module: {
          rules: [
            {
              test: /\.wasm$/,
              loader: 'base64-loader',
              type: 'javascript/auto',
              // argon2-browser 폴더에 대해서만 해당 로더가 적용될 수 있도록 
              include: path.join(__dirname, 'node_modules/argon2-browser/dist/'),
            },
          ],
        },

🙉 Epilogue

이처럼 docusaurus에서 라이브 예제 코드들을 작성하며 커스텀 플러그인을 만들어 webpack5 설정을 커스터마이징 하고, 여러 라이브러리들의 빌드 환경을 세팅할 수 있었습니다:)

profile
개발하는 돌멩이

0개의 댓글