wi

webpack-isomorphic

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

Showing:

Popularity

Downloads/wk

19

GitHub Stars

21

Maintenance

Last Commit

3yrs ago

Contributors

0

Package

Dependencies

1

Size (min+gzip)

0.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

webpack-isomorphic

Build Status Coverage Status Version License Dependencies DevDependencies

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial