4.3.2 • Published 5 years ago
webpack-isomorphic v4.3.2
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.
4.3.2
5 years ago
4.3.1
5 years ago
4.3.0
5 years ago
4.2.0
5 years ago
4.1.1
5 years ago
4.1.0
5 years ago
4.0.1
6 years ago
4.0.0
6 years ago
4.0.0-alpha.1
6 years ago
4.0.0-alpha.0
6 years ago
3.0.1
6 years ago
3.0.0
6 years ago
2.1.2
6 years ago
2.1.1
6 years ago
2.1.0
6 years ago
2.0.2
6 years ago
2.0.1
6 years ago
2.0.0
6 years ago
1.4.1
7 years ago
1.4.0
7 years ago
1.3.4
8 years ago
1.3.3
8 years ago
1.3.2
8 years ago
1.3.1
8 years ago
1.3.0
8 years ago
1.2.0
8 years ago
1.1.0
8 years ago
1.0.1
8 years ago
1.0.0
8 years ago
0.1.0
8 years ago