{"data":{"prismicDocsCategory":{"data":{"pages":[{"page":{"uid":"what-is-uxpin-merge","document":[{"data":{"title":{"text":"What is UXPin Merge?"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"using-react.js-components","document":[{"data":{"title":{"text":"Using React.js Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"creating-a-library","document":[{"data":{"title":{"text":"Creating a Library"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"ai-assisted-merge-integration","document":[{"data":{"title":{"text":"AI-Assisted Merge Integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"start-with-a-boilerplate-repo","document":[{"data":{"title":{"text":"Start with a Boilerplate Repo"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"integrating-your-own-components","document":[{"data":{"title":{"text":"Integrating Your Own Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"config-file","document":[{"data":{"title":{"text":"Config File"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"webpack-configuration","document":[{"data":{"title":{"text":"Webpack Configuration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"wrapper-component","document":[{"data":{"title":{"text":"Wrapper Component"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"adjusting-components","document":[{"data":{"title":{"text":"Adjusting Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"configuring-the-properties-panel","document":[{"data":{"title":{"text":"Configuring the Properties Panel"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"authoring-and-managing-jsx-presets","document":[{"data":{"title":{"text":"Authoring and Managing JSX Presets"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"cli-tool","document":[{"data":{"title":{"text":"CLI Tool"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"ci-servers","document":[{"data":{"title":{"text":"Connecting code to UXPin (CI & push)"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"version-control","document":[{"data":{"title":{"text":"Version Control"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"patterns","document":[{"data":{"title":{"text":"Patterns"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"tailwind-css-integration","document":[{"data":{"title":{"text":"Tailwind CSS Integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-design-system-documentation","document":[{"data":{"title":{"text":"Merge Design System Documentation"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-component-manager","document":[{"data":{"title":{"text":"Merge Component Manager"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"storybook-integration","document":[{"data":{"title":{"text":"Storybook integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-faq","document":[{"data":{"title":{"text":"Frequently Asked Questions"},"visible_in_table_of_content":"true"}}]}}]}},"prismicDocsPage":{"data":{"title":{"text":"Webpack Configuration"},"isVisibleForRobots":"true","body":[{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p>Merge relies on <a target=\"_blank\" rel=\"noopener\" href=\"https://webpack.js.org/\">Webpack</a> to bundle all of the component files. All the code and encoded files are being <em>merged </em>into one bundle sent to UXPin. As a result, your Webpack config has to be built in a way that does not export any external files. For example, do not use <a target=\"_blank\" rel=\"noopener\" href=\"https://github.com/webpack-contrib/mini-css-extract-plugin\">mini-css-extract-plugin</a>, but rather rely on <a target=\"_blank\" rel=\"noopener\" href=\"https://github.com/webpack-contrib/style-loader\">style-loader</a> and <a target=\"_blank\" rel=\"noopener\" href=\"https://github.com/webpack-contrib/css-loader\">css-loader</a> to load your CSS into Javascript bundle. For imports of font files or images<strong> </strong>instead of using <a target=\"_blank\" rel=\"noopener\" href=\"https://github.com/webpack-contrib/file-loader\">file-loader</a> – use <a target=\"_blank\" rel=\"noopener\" href=\"https://github.com/webpack-contrib/url-loader\">url-loader</a>.<br /><br />If this approach is not compliant with your current Webpack config, please create a separate config for Merge. </p><p>Remember to store the location of your Webpack config in UXPin Config file.</p>"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"module.exports = {\n    components: {\n        categories: [\n            {\n                name: \"First Category\",\n                include: [\n                    \"src/components/FirstComponent/FirstComponent.js\",\n                    \"src/components/SecondComponent/SecondComponent.js\"\n                ]\n            }\n        ],\n        wrapper: 'src/Wrapper/UXPinWrapper.js',\n        webpackConfig: 'webpack.config.js',\n    },\n    name: \"Name of your Library\"\n}"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<h3>Basic Webpack Configs</h3><p>The following config serves a repository where CSS is served via JS (CSS-in-JS library: <a target=\"_blank\" rel=\"noopener\" href=\"https://emotion.sh/\">Emotion</a>) and SVG icons are being inlined and imported into an Icon component:</p>"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"const path = require('path');\n \nmodule.exports = {\n  entry: ['./src/index.js'],\n  output: {\n    path: path.resolve(__dirname, 'build'),\n    filename: 'bundle.js',\n    publicPath: '/',\n  },\n  resolve: {\n    modules: [__dirname, 'node_modules'],\n    extensions: ['*', '.js', '.jsx'],\n  },\n  devtool: 'source-map',\n  module: {\n    rules: [\n      {\n        test: /\\.svg$/,\n        exclude: /node_modules/,\n        loader: 'svg-react-loader',\n      },\n      {\n        loader: 'babel-loader',\n        test: /\\.js$/,\n        exclude: /node_modules/,\n      },\n      {\n        enforce: 'pre',\n        test: /\\.js$/,\n        loader: 'source-map-loader',\n      },\n    ],\n  },\n};"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p>The following config serves a repository that uses SASS for styling and inlines SVG icons:<br /></p>"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"const path = require(\"path\");\nconst webpack = require(\"webpack\");\n \nmodule.exports = {\n    output: {\n      path: path.resolve(__dirname, \"build\"),\n      filename: \"bundle.js\",\n      publicPath: \"/\"\n    },\n    resolve: {\n      modules: [__dirname, \"node_modules\"],\n      extensions: [\"*\", \".js\", \".jsx\"]\n    },\n    devtool: \"source-map\",\n    module: {\n      rules: [\n        {\n          test: /\\.svg$/,\n          loader: 'svg-react-loader'\n        },\n        {\n          test: /\\.(s*)css$/,\n          use: [\n            {\n              loader: 'style-loader'\n            },\n            {\n              loader: 'css-loader',\n              options: {\n                importLoaders: 2\n              }\n            },\n            {\n              loader: 'sass-loader'\n            }\n          ]\n        },\n        {\n          loader: \"babel-loader\",\n          test: /\\.js?$/,\n          exclude: /node_modules/,\n          options: {\n            presets: ['@babel/preset-env', '@babel/preset-react'],\n          }\n        },\n        {\n          enforce: \"pre\",\n          test: /\\.js$/,\n          loader: \"source-map-loader\"\n        }\n      ]\n    }\n}"}]},"language":"JavaScript"}}]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"categoryUid":"merge","pageUid":"webpack-configuration","meta_description":"UXPin's merge Docs, webpack configuration for new and advanced users","meta_image":"https://images.prismic.io/uxpincommunity/fa3875f8df8606e6405ba46165becc1ea6ed3d34.png?auto=compress,format","meta_title":"Webpack Configuration | Merge","page_title":"Webpack Configuration | Merge"}}