Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/itgalaxy/webpack-modernizr-loader
Get your modernizr build bundled with webpack, use modernizr with webpack easily
https://github.com/itgalaxy/webpack-modernizr-loader
loader modernizr webpack webpack-loader
Last synced: about 1 month ago
JSON representation
Get your modernizr build bundled with webpack, use modernizr with webpack easily
- Host: GitHub
- URL: https://github.com/itgalaxy/webpack-modernizr-loader
- Owner: itgalaxy
- License: mit
- Created: 2016-10-18T15:44:45.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T02:17:28.000Z (almost 2 years ago)
- Last Synced: 2024-04-13T22:24:30.449Z (8 months ago)
- Topics: loader, modernizr, webpack, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 1.83 MB
- Stars: 39
- Watchers: 6
- Forks: 5
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# webpack-modernizr-loader
[](https://www.npmjs.org/package/webpack-modernizr-loader)
[](https://travis-ci.org/itgalaxy/webpack-modernizr-loader)
[](https://david-dm.org/itgalaxy/webpack-modernizr-loader)
[](https://david-dm.org/itgalaxy/webpack-modernizr-loader?type=dev)
Get your modernizr build bundled with webpack.
## Installation
```shell
$ npm install webpack-modernizr-loader --save-dev
```
## Usage
[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
There are three use case.
1. Using loader `options`.
```javascript
const modernizr = require("modernizr");
```
**webpack.config.js**
```javascript
module.exports = {
module: {
rules: [
{
loader: "webpack-modernizr-loader",
options: {
// Full list of supported options can be found in [config-all.json](https://github.com/Modernizr/Modernizr/blob/master/lib/config-all.json).
options: ["setClasses"],
"feature-detects": [
"test/css/flexbox",
"test/es6/promises",
"test/serviceworker"
]
// Uncomment this when you use `JSON` format for configuration
// type: 'javascript/auto'
},
test: /empty-alias-file\.js$/
}
]
},
resolve: {
alias: {
// You can add comment "Please do not delete this file" in this file
modernizr$: path.resolve(__dirname, "/path/to/empty-alias-file.js")
}
}
};
```
2. Using config file through alias (supported **JavaScript** and **JSON** syntax).
```javascript
const modernizr = require("modernizr");
```
**.modernizrrc.js**
```javascript
module.exports = {
options: ["setClasses"],
"feature-detects": [
"test/css/flexbox",
"test/es6/promises",
"test/serviceworker"
]
};
```
**webpack.config.js**
```javascript
module.exports = {
module: {
rules: [
{
loader: "webpack-modernizr-loader",
test: /\.modernizrrc\.js$/
// Uncomment this when you use `JSON` format for configuration
// type: 'javascript/auto'
}
]
},
resolve: {
alias: {
modernizr$: path.resolve(__dirname, "/path/to/.modernizrrc.js")
}
}
};
```
3. Using config (supported **JavaScript** and **JSON** syntax) file directly (see below example how it is use).
```javascript
const modernizr = require("modernizr");
```
**webpack.config.js**
```javascript
module.exports = {
module: {
rules: [
{
loader: "webpack-modernizr-loader",
test: /\.modernizrrc\.js$/
// Uncomment this when you use `JSON` format for configuration
// type: 'javascript/auto'
}
]
}
};
```
## Related
- [Modernizr](https://github.com/Modernizr/Modernizr) - API for this module
## Contribution
Feel free to push your code if you agree with publishing under the MIT license.
## [Changelog](CHANGELOG.md)
## [License](LICENSE)