Added .web.js{x} resolve extensions to webpack for better react-native-web support

[piu130]

As described in the react-native-web doc there is the new file extension .web.js{x} needed for significant platform differences.
This PR adds those extensions.
Discussion see here.

Fixes #1056.

[edmorley]

Thank you for the PR :-)

[edmorley]

Could you add a comment linking to the react-native-web docs, and also a Fixes #1056 to the commit message/PR description? :-)

[piu130]

Done.

[kopax]

Hello, I am trying hard to distribute react-native packages with extensions support from node_modules, .web.js, .android.js, .js , I don't get how to tell react-native application to import the correct file when node_modules. I am not able to tell the webapp to import .web.js first, too when import happen from node_modules, I initialized my project with expo SDk36, do you know how I can solve my issue? Thanks again for reading.

[edmorley]

Sorry for not spotting this before, but could you add some tests to:
https://github.com/neutrinojs/neutrino/blob/master/packages/react/test/react_test.js

I'd just put inside the "valid preset {production, development, test}", like the web preset does:

neutrino/packages/web/test/web_test.js

Lines 25 to 93 in f42984f

	test('valid preset production', t => {
	process.env.NODE_ENV = 'production';
	const api = new Neutrino();
	api.use(mw());
	const config = api.config.toConfig();
	// Common
	t.is(config.target, 'web');
	t.deepEqual(config.resolve.extensions, expectedExtensions);
	t.is(config.optimization.runtimeChunk, 'single');
	t.is(config.optimization.splitChunks.chunks, 'all');
	// NODE_ENV/command specific
	t.true(config.optimization.minimize);
	t.false(config.optimization.splitChunks.name);
	t.is(config.devtool, undefined);
	t.is(config.devServer, undefined);
	const errors = validate(config);
	t.is(errors.length, 0);
	});
	test('valid preset development', t => {
	process.env.NODE_ENV = 'development';
	const api = new Neutrino();
	api.use(mw());
	const config = api.config.toConfig();
	// Common
	t.is(config.target, 'web');
	t.deepEqual(config.resolve.extensions, expectedExtensions);
	t.is(config.optimization.runtimeChunk, 'single');
	t.is(config.optimization.splitChunks.chunks, 'all');
	// NODE_ENV/command specific
	t.false(config.optimization.minimize);
	t.true(config.optimization.splitChunks.name);
	t.is(config.devtool, 'cheap-module-eval-source-map');
	t.not(config.devServer, undefined);
	t.is(config.devServer.host, '0.0.0.0');
	t.is(config.devServer.port, 5000);
	t.is(config.devServer.public, 'localhost:5000');
	t.is(config.devServer.publicPath, '/');
	const errors = validate(config);
	t.is(errors.length, 0);
	});
	test('valid preset test', t => {
	process.env.NODE_ENV = 'test';
	const api = new Neutrino();
	api.use(mw());
	const config = api.config.toConfig();
	// Common
	t.is(config.target, 'web');
	t.deepEqual(config.resolve.extensions, expectedExtensions);
	t.is(config.optimization.runtimeChunk, 'single');
	t.is(config.optimization.splitChunks.chunks, 'all');
	// NODE_ENV/command specific
	t.false(config.optimization.minimize);
	t.true(config.optimization.splitChunks.name);
	t.is(config.devtool, undefined);
	t.is(config.devServer, undefined);
	const errors = validate(config);
	t.is(errors.length, 0);
	});

Thanks :-)

[piu130]

Missed that :) Done.

[edmorley]

Re creating a shared test config (saw the email notification, though the message isn't above any more) - we're thinking of switching to Jest at some point (#635), which will mean we can use the snapshots feature and so avoid the manual duplication/boilerplate :-)

[edmorley]

Many thanks for the PR! :-)

[kopax]

Hello, I am trying hard to distribute react-native packages with extensions support from node_modules, .web.js, .android.js, .js (see https://stackoverflow.com/questions/60195490/how-to-distribute-package-for-expo-web-js-js-configuration)

I don't get how to tell react-native application to import the correct file when node_modules. I am not able to tell the webapp to import .web.js first, too when import happen from node_modules, I initialized my project with expo SDk36, do you know how I can solve my issue? Thanks again for reading.