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: "modernizr",
        test: /\.modernizrrc$/, // or "/\.modernizrrc\.json$/", or "/\.modernizrrc\.js$/"
      }
    ]
  },
  resolve: {
    alias: {
      modernizr$: path.resolve(__dirname, "path/to/.modernizr") // or "path/to/.modernizr.json", or "path/to/.modernizr.js"
    }
  }
}

Alternative configurations supported dynamic configuration:

module.exports = {
  module: {
    loaders: [
      {
       loader: `modernizr?config=${encodeURI(JSON.stringify(modernizrConfig))}`,
       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
    }
  }
}

Note: webpack normalize query to loader.

Using config through query string is have large priority than through resolve.alias.

Usage

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

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

1.0.2 - 2017-01-31

• Fixed: updated webpack peer dependency to support 2.2.1.