Webpack Conditional Require

Question

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!

Accepted Answer

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.

Answer 2

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

Webpack Conditional Require

2 Answers

Must Read

Your Answer

Marcus Vance

Webpack Conditional Require

2 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

Marcus Vance