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#modulesimport style from './css/style.css'; // Require a image file<img = />
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 = ; const isomorphicPlugin = extensions: 'jpg' 'png' 'gif' 'css' // assetsFilePath: 'webpack.assets.json'; moduleexports = // The base directory of your source files context: __dirname + '/src' // ... plugins: //... isomorphicPlugin ;
Server-side codes
const webpackIsomorphic = ; // The base directory of your built fileswebpackIsomorphic; //...
Enjoy!
Example
See the example project for more details.