how to modify webpack configuration? want to add custom font handling for react-web side #27

SeanFelipe · 2019-01-11T04:20:18Z

Hello! I am looking to add some custom fonts. Native is working fine per this article https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e. However on the web side I'm struggling to get any sort of css loading to work at all.

I am looking to do this by adding a handler to webpack to handle font files. However the only webpack.config.js I'm seeing is in ./node_modules/react-universal-ui/dist/cli/local/tools which seems to be for the CLI tool?

Is it possible to add my own webpack configuration? Should I modify this one?

Thanks ~~ !

The text was updated successfully, but these errors were encountered:

cloudle · 2019-01-11T12:37:56Z

@SeanFelipe, definely we could (and sorry for the poor documentation we had)..
You'll need to create ruui.config.js in the root of the project, which look like this:

module.exports = { // <- configurations for ruui
  webpack: (configs) => {
     // override ruui configs here,
     // e.g: configs.module.rules.push({ test: /\.md/, loader: 'raw-loader', });
     return configs;
  },
  ejsTemplate: { // <- content hooks for index.html used by ruui
    preHeading: `
       <link rel="stylesheet" href="/graphiqlStyle.css" />
    `,
  }
};

Addtional notes:

all options on ruui.config.js is optional, we don't have to specify them, empty object export will just fine (module.exports = {};)
ejsTemplate include following hooks:

preHeading: will be append right after <head> open tag
postHeading: will be append before </head> closing tag
preContent: will be append right after <body> open tag (after <div id="root">)
postContent: will be append before </body> closing tag

most of the config could be done by override webpack config, howeverruui.config.js also allow us quick config like following example:

const webpack = require('webpack'),
	env = process.env.ENV || 'development',
	isProduction = env === 'production';

module.exports = {
	publicPath: isProduction ? '/' : 'http://localhost:3000/',
	host: () => 'localhost',
	port: () => 3000,
	keepHtml: true, // <- for advance SSR
	ssrHydrate: false, <- for advance SSR
	keepPreviousBuild: false,
	webpack: (configs) => {
		configs.module.rules.push({
			test: /\.md/,
			loader: 'raw-loader',
		});

		if (!isProduction) {
			configs.plugins.push(new webpack.ContextReplacementPlugin(
				/graphql-language-service-interface[\\/]dist$/,
				new RegExp('^\\./.*\\.js$')
			));
		}

		/* temporary disable, to make GraphiQL work.. */
		configs.optimization.minimize = false;

		return configs;
	},
};

SeanFelipe · 2019-01-11T18:07:25Z

Okay great information. Thanks :)

SeanFelipe closed this as completed Jan 11, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

how to modify webpack configuration? want to add custom font handling for react-web side #27

how to modify webpack configuration? want to add custom font handling for react-web side #27

SeanFelipe commented Jan 11, 2019 •

edited

Loading

cloudle commented Jan 11, 2019 •

edited

Loading

SeanFelipe commented Jan 11, 2019

how to modify webpack configuration? want to add custom font handling for react-web side #27

how to modify webpack configuration? want to add custom font handling for react-web side #27

Comments

SeanFelipe commented Jan 11, 2019 • edited Loading

cloudle commented Jan 11, 2019 • edited Loading

SeanFelipe commented Jan 11, 2019

SeanFelipe commented Jan 11, 2019 •

edited

Loading

cloudle commented Jan 11, 2019 •

edited

Loading