작성완료

CRA(create-react-app)에서 webpack polyfill 설정

필요한 polyfill 모듈을 설치한 후, webpack 설정 파일을 작성하고 react-script 명령어를 변경하여 create-react-app에서 polyfill을 설정하는 방법을 설명합니다. 마지막으로, npm run start 명령어로 실행합니다.

Reactcreate-react-appwebpackpolyfill

1. 필요한 polyfill 모듈 설치

npm i react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process web3-utils

2. webpack 설정파일 작성

/config-overrides.js

javascript
const webpack = require("webpack");

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    crypto: require.resolve("crypto-browserify"),
    stream: require.resolve("stream-browserify"),
    assert: require.resolve("assert"),
    http: require.resolve("stream-http"),
    https: require.resolve("https-browserify"),
    os: require.resolve("os-browserify"),
    url: require.resolve("url"),
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ]);
  return config;
};

3. react-script 명령어 변경

package.json

json
{
  ...

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
  },
  ...
}

4. 실행

npm run start