A lightweight solution for the server-side rendering of Webpack-built applications.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
.gitignore
LICENSE
README.md
index.js
package.json
plugin.js

README.md

webpack-isomorphic · GitHub license npm version

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']
});

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'
});

//...

Enjoy!

Example

See the example project for more details.