webpack-isomorphic

A lightweight solution for the server-side rendering of webpack-built applications.

Why do we need it?

With webpack, we can require any files by using loaders:

// CSS Modules
// @see https://www.npmjs.com/package/css-loader#modules
import style from './css/style.css';

// Require a image file
<img src={require('./img/avatar.jpg')} />

But you'll get an error in server-side rendering, because it is not supported by Node.js.

webpack-isomorphic is a lightweight, easy-to-use solution to solve this issue, and make your client-side codes work on server too.

Usage

Installation

# for webpack 4
npm install --save webpack-isomorphic@4
# for webpack 3
npm install --save webpack-isomorphic@3

webpack.config.js

const IsomorphicPlugin = require('webpack-isomorphic/plugin');

const isomorphicPlugin = new IsomorphicPlugin({
	extensions: ['jpg', 'png', 'gif', 'css'],
	// assetsFilePath: 'webpack.assets.json'
});

module.exports = {
	// The base directory of your source files
	context: __dirname + '/src',
	// ...
	plugins: [
		//...
		isomorphicPlugin
	]
};

Server-side codes

const webpackIsomorphic = require('webpack-isomorphic');

// The base directory of your built files
webpackIsomorphic.install(__dirname + '/dist', {
	cache: process.env['NODE_ENV'] !== 'development',
	// assetsFilePath: __dirname + '/dist/webpack.assets.json'
});

//...

Enjoy!

Example

See the example project for more details.