MergeはWebpackを使用してすべてのコンポーネント ファイルをバンドルします。すべてのコードとエンコードされたファイルは UXPinに送られる 1 つのバンドルにマージされます。そのため、外部ファイルをエクスポートしない方法で Webpack設定を構築する必要があります。例えば、mini-css-extract-pluginを使用せず、style-loader と css-loaderを使用して CSS を Javascript バンドルに読み込むようにします。フォントファイルや画像の読み込みには、ファイルローダではなく、url-loaderを使用してください。

このアプローチが現在のWebpack設定に準拠しない場合は、Merge用に別の設定を作成してください。

UXPinの設定ファイルにWebpack設定の場所を保存することを忘れないでください。

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設定ファイル

以下の設定では、CSSをJS（CSS-in-JSライブラリ：Emotion）経由で提供し、SVGアイコンをインライン化してIconコンポーネントに取り込むリポジトリを提供しています。

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',
      },
    ],
  },
};

以下の設定は、スタイリングにSASSを使用し、SVGアイコンをインライン化するリポジトリを提供しています。

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"
        }
      ]
    }
}