Merge는 Webpack을 사용하여 모든 컴포넌트 파일을 번들합니다. 모든 코드와 인코딩된 파일은 UXPin으로 전송되는 단일 번들로 병합됩니다. 따라서, 외부 파일을 내보내지 않는 방식으로 Webpack config을 빌드해야 합니다. 예를 들어, mini-css-extract-plugin을 사용하지 마시고, style-loader 및 css-loader를 사용하여 CSS를 Javascript 번들로 로드할 수 있습니다. 폰트 파일이나 이미지를 읽으려면 file-loader가 아닌 url-loader를 사용하십시오.

이 접근법이 현재 이용하고 계시는 Webpack config와 맞지 않는다면, Merge를 위한 별도의 config를 만드십시오.

UXPin Config 파일에 Webpack config 위치를 저장하는 것을 잊지 마십시오.

module.exports = {
    components: {
        categories: [
            {
                name: "First Category",
                include: [
                    "src/components/FirstComponent/FirstComponent.js",
                    "src/components/SecondComponent/SecondComponent.js"
                ]
            }
        ],
        wrapper: 'src/Wrapper/UXPinWrapper.js',
        webpackConfig: 'webpack.config.js',
    },
    name: "Name of your Library"
}

기본적인 Webpack config

다음 config는 CSS를 JS(CSS-in-JS Library: Emotion)를 통해 제공하고 SVG 아이콘을 인라인하여 Icon 컴포넌트로 가져오는 repo를 나타내고 있습니다.

const path = require('path');
 
module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  resolve: {
    modules: [__dirname, 'node_modules'],
    extensions: ['*', '.js', '.jsx'],
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\\.svg$/,
        exclude: /node_modules/,
        loader: 'svg-react-loader',
      },
      {
        loader: 'babel-loader',
        test: /\\.js$/,
        exclude: /node_modules/,
      },
      {
        enforce: 'pre',
        test: /\\.js$/,
        loader: 'source-map-loader',
      },
    ],
  },
};

다음 config는 스타일링에 SASS를 사용하고 SVG 아이콘을 인라인하는 repo를 나타냅니다.

const path = require("path");
const webpack = require("webpack");
 
module.exports = {
    output: {
      path: path.resolve(__dirname, "build"),
      filename: "bundle.js",
      publicPath: "/"
    },
    resolve: {
      modules: [__dirname, "node_modules"],
      extensions: ["*", ".js", ".jsx"]
    },
    devtool: "source-map",
    module: {
      rules: [
        {
          test: /\\.svg$/,
          loader: 'svg-react-loader'
        },
        {
          test: /\\.(s*)css$/,
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader',
              options: {
                importLoaders: 2
              }
            },
            {
              loader: 'sass-loader'
            }
          ]
        },
        {
          loader: "babel-loader",
          test: /\\.js?$/,
          exclude: /node_modules/,
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          }
        },
        {
          enforce: "pre",
          test: /\\.js$/,
          loader: "source-map-loader"
        }
      ]
    }
}