webpack-modernizr-loader

webpack-modernizr-loader

Get your modernizr build bundled with webpack.

Installation

$ npm install webpack-modernizr-loader --save-dev

Initialization

You have to create a .modernizrrc (or .modernizrrc.js) configuration file and put your modernizr stuff in it. Like so:

// .modernizrrc or .modernizrrc.json
{
    "options": [
        "setClasses"
    ],
    "feature-detects": [
        "test/css/flexbox",
        "test/es6/promises",
        "test/serviceworker"
    ]
}

Or

'use strict';

module.exports = {
    options: [
        "setClasses"
    ],
    "feature-detects": [
        "test/css/flexbox",
        "test/es6/promises",
        "test/serviceworker"
    ]
};

Full list of supported "options" and their "description" can be found in modernizr.

Webpack config

Documentation: Using loaders

Put the following code to your webpack config file:

module.exports = {
    module: {
        loaders: [
            {
                loader: 'webpack-modernizr?useConfigFile',
                test: /\.modernizrrc$/, // or "/\.modernizrrc\.json$/", or "/\.modernizrrc\.js$/"
            }
        ]
    },
    resolve: {
        alias: {
            modernizr$: path.resolve(__dirname, "path/to/.modernizrrc") // or "path/to/.modernizrrc.json", or "path/to/.modernizrrc.js"
        }
    }
}

Alternative configurations supported dynamic configuration:

const modernizrOptions = {
    options: [
        "setClasses"
    ],
    'feature-detects': [
        'test/css/flexbox',
        'test/es6/promises',
        'test/serviceworker'
    ]
};

module.exports = {
    module: {
        loaders: [
            {
                loader: `webpack-modernizr?${JSON.stringify(modernizrOptions)}`,
                test: /modernizr$/
            }
        ]
    },
    resolve: {
        alias: {
            modernizr$: path.resolve(__dirname, "path/to/empty-file") // You can add comment "Please do not delete this file" in this file
        }
    }
}

In webpack 2 your can use this config:

const modernizrOptions = {
    options: [
        "setClasses"
    ],
    'feature-detects': [
        'test/css/flexbox',
        'test/es6/promises',
        'test/serviceworker'
    ]
};

module.exports = {
    module: {
        rules: [
            {
                loader: `webpack-modernizr-loader`,
                options: modernizrOptions,
                test: /modernizr$/
            }
        ]
    },
    resolve: {
        alias: {
            modernizr$: path.resolve(__dirname, "path/to/empty-file") // You can add comment "Please do not delete this file" in this file
        }
    }
}

Usage

Now you are able to import your custom modernizr build as a module throughout your application like so:

const modernizr = require('modernizr');

import 'modernizr';

You can used bundle plugin for async loading:

import modernizrLoader from 'bundle?lazy!modernizr';

modernizrLoader(() => {});

Related

• Modernizr - API for this module

Contribution

Feel free to push your code if you agree with publishing under the MIT license.

Changelog

License

Changelog

2.0.0 - 2017-02-01

• Changed: no longer required to transfer options for modernizr using config option.
• Changed: to load configuration from file, need specify useConfigFile option.
• Chore: no need to use function encodeURI for query string.