https://github.com/caiogondim/webpack-conditional-loader
C conditionals directive for JavaScript
https://github.com/caiogondim/webpack-conditional-loader
javascript optimization webpack webpack-loader webpack2
Last synced: about 2 months ago
JSON representation
C conditionals directive for JavaScript
- Host: GitHub
- URL: https://github.com/caiogondim/webpack-conditional-loader
- Owner: caiogondim
- License: mit
- Created: 2017-07-27T22:00:40.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-01-07T08:05:47.000Z (over 5 years ago)
- Last Synced: 2025-04-02T12:05:23.441Z (2 months ago)
- Topics: javascript, optimization, webpack, webpack-loader, webpack2
- Language: JavaScript
- Homepage: https://npm.im/webpack-conditional-loader
- Size: 134 KB
- Stars: 110
- Watchers: 2
- Forks: 24
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# webpack-conditional-loader
Inspired by [C conditionals directive](https://gcc.gnu.org/onlinedocs/gcc-3.0.2/cpp_4.html),
conditional loader decides if a given block should be included in the final bundle.
Useful for removing instrumentation code and making your final production bundle smaller (therefore
faster).
## Installation
```bash
npm install --save-dev webpack-conditional-loader
```
## Usage
### In your `webpack.config.js`
Put `webpack-conditional-loader` as the last loader in the array, so it will process the code before
all others.
```js
module: {
rules: [{
test: /\.js$/,
use: ['babel-loader', 'webpack-conditional-loader']
}]
}
```
Get an example config file [here](https://github.com/caiogondim/webpack-conditional-loader/blob/master/webpack.js)
### On your code
Use `// #if expression` and `// #endif` to wrap blocks of code you want to be removed if a given
predicate is false.
```js
// #if process.env.NODE_ENV === 'DEVELOPMENT'
console.log('lorem')
console.log('ipsum')
// #endif
```
In the example above, the code will be removed if the enviroment variable `NODE_ENV` is not
`DEVELOPMENT`, removing unnecessary code from your production bundle.
The same technique can be used to prevent loading packages in the production bundle.
```js
// #if process.env.NODE_ENV !== 'BUILD'
import reduxLogger from 'redux-logger'
// #endif
```
## Credits
- [GCC C conditional documentation](https://gcc.gnu.org/onlinedocs/gcc-3.0.2/cpp_4.html)
---
[caiogondim.com](https://caiogondim.com) ·
GitHub [@caiogondim](https://github.com/caiogondim) ·
Twitter [@caio_gondim](https://twitter.com/caio_gondim)