Recipes

Table of Contents

Extending webpack.config

If you need customize webpack.config generated by react-union-scripts, specify function mergeWebpackConfig in union.config.js.

module.exports = {
	mergeWebpackConfig: config => {
		console.log(config);
		// 		Outputs:
		// 		{
		// 			"context": "...",
		// 			"entry": {
		// 			"vendor": [...],
		// 			"SampleApp": [...]
		// 			},
		// 			"output": {...},
		// 			"plugins": [...],
		// 			"resolve": {...},
		// 			"module": {...}
		// 		}

		return config;
	},
};

Merging webpack.config can be tedious task. To make it little bit simpler we recommend to use webpack-merge library.

Install it by running:

yarn add -D webpack-merge

in the root of your project. Than use it in union.config.js, e.g.:

const merge = require('webpack-merge');

module.exports = ({ debug }) => ({
	mergeWebpackConfig: unionWebpackConfig =>
		merge(unionWebpackConfig, {
			devtool: debug ? 'eval' : false,
		}),
});

.ejs templates for mocking the server output

Create your .ejs template at /public/<YourAppName>/index.ejs. YourAppName refers to application registered within union.config.js.

Asynchronous loading of modules

If there is a file with suffix ".widget.js" it is loaded by bundle-loader. Bundle-loader is better alternative to both require.ensure and [import()]; Every async module is split up into individual chunks.

You can rewrite suffix in the union.config.js:

module.exports = {
	asyncSuffix: 'widget',
	asyncSuffix: ['widget', 'async'],
	asyncSuffix: '/.widget.js$',
	asyncSuffix: '/.(widget|async).js$',
};

Example

// MyWidget.widget.js

const MyWidget = props => {
	// Your React component
};

export default MyWidget;
// MyWidgetRoute.js

import loadMyWidget from './MyWidget.widget';

export default {
	path: 'my-widget',
	getComponent(done) {
		loadWidget(mod => done(mod.default));
	},
};

Testing with Enzyme

Add enzyme to your project:

yarn add -D enzyme enzyme-adapter-react-16

Create file testsSetup.js in root your project and paste following code:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

Adding Sass support

Add webpack-merge, sass-loader and node-sass to your dependencies:

yarn add -D webpack-merge sass-loader node-sass

Then add union.config.js inside your root folder with following content:

const merge = require('webpack-merge');
const path = require('path');

module.exports = ({ debug }) => ({
	mergeWebpackConfig: unionWebpackConfig =>
		merge(unionWebpackConfig, {
			module: {
				rules: [
					{
						test: /\.scss$/,
						include: path.resolve(__dirname, './src'),
						use: [
							'style-loader',
							{
								loader: 'css-loader',
								options: {
									importLoaders: 1,
									minimize: true,
									sourceMap: debug,
								},
							},
							{
								loader: 'resolve-url-loader',
								options: {
									sourceMap: true,
								},
							},
							{
								loader: 'sass-loader',
								options: {
									sourceMap: debug,
								},
							},
						],
					},
				],
			},
		}),
});