Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack conditional require

I'm writing an isomorphic Key Value Store with webpack.

This is currently my approach to load the libraries, which obviously doesn't work, because webpack wants to resolve both require. Whats' the right approach?

var db = null;

if (typeof window === 'undefined') {
    // node context
    db = require('level');
} else {
    // browser context
    db = require('gazel');
}

I know, that you can provide a target to webpack. But I have no idea how to use that.

Thanks!

like image 838
vardump Avatar asked Jul 06 '15 15:07

vardump


2 Answers

I think resolve.alias would work for you. You would set db module to point at level or gazel depending on which build you are creating.

like image 103
Juho Vepsäläinen Avatar answered Nov 11 '22 19:11

Juho Vepsäläinen


webpack.config.js

module.exports = {
plugins: [
    new webpack.DefinePlugin({
        "process.env": {
            BROWSER: JSON.stringify(true)
        }
    })
]}

your-universal.js

var db = null;
if (!process.env.BROWSER) {
    // node context
    db = require('level');
} else {
    // browser context
    db = require('gazel');
}
like image 11
Lonelydatum Avatar answered Nov 11 '22 19:11

Lonelydatum