All Projects → caiogondim → Webpack Conditional Loader

caiogondim / Webpack Conditional Loader

Licence: mit
C conditionals directive for JavaScript

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Webpack Conditional Loader

Webpack Core Usage
webpack2完整系列课程,欢迎阅读。同时欢迎移步我的react全家桶文章全集: https://github.com/liangklfangl/react-article-bucket
Stars: ✭ 94 (+1.08%)
Mutual labels:  webpack, webpack2, webpack-loader
Serverless Plugin Webpack
Serverless Plugin Webpack
Stars: ✭ 72 (-22.58%)
Mutual labels:  webpack, webpack2, optimization
Bootstrap Loader
Load Bootstrap styles and scripts in your Webpack bundle
Stars: ✭ 1,038 (+1016.13%)
Mutual labels:  webpack, webpack2, webpack-loader
Svg Sprite Loader
Webpack loader for creating SVG sprites.
Stars: ✭ 1,822 (+1859.14%)
Mutual labels:  webpack, webpack2, webpack-loader
Webpack.js.org
Repository for webpack documentation and more!
Stars: ✭ 2,049 (+2103.23%)
Mutual labels:  webpack, webpack2, webpack-loader
Markdown Loader
markdown loader for webpack
Stars: ✭ 335 (+260.22%)
Mutual labels:  webpack, webpack2, webpack-loader
String Replace Loader
Replace loader for Webpack
Stars: ✭ 205 (+120.43%)
Mutual labels:  webpack, webpack2, webpack-loader
Node Addon Loader
A loader for node native addons
Stars: ✭ 17 (-81.72%)
Mutual labels:  webpack, webpack2, webpack-loader
Css Modules Flow Types
Creates flow type definitions from CSS Modules files using Webpack loader or CLI 👾
Stars: ✭ 92 (-1.08%)
Mutual labels:  webpack, webpack-loader
Dejajs Components
Angular components
Stars: ✭ 37 (-60.22%)
Mutual labels:  webpack, webpack2
Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+992.47%)
Mutual labels:  webpack, optimization
Webpack Alioss Plugin
阿里 oss-webpack 自动上传插件
Stars: ✭ 35 (-62.37%)
Mutual labels:  webpack, webpack2
Svgr
Transform SVGs into React components 🦁
Stars: ✭ 8,263 (+8784.95%)
Mutual labels:  webpack, webpack-loader
Budgeting
Budgeting - React + Redux + Webpack (tree shaking) Sample App
Stars: ✭ 971 (+944.09%)
Mutual labels:  webpack, webpack2
Ng Router Loader
Webpack loader for NgModule lazy loading using the angular router
Stars: ✭ 47 (-49.46%)
Mutual labels:  webpack, webpack-loader
Generate Pages Tutorial
教你一步步从零构建 webpack 开发多页面环境
Stars: ✭ 63 (-32.26%)
Mutual labels:  webpack, webpack2
Sketch Loader
Webpack loader for Sketch (+43) files
Stars: ✭ 69 (-25.81%)
Mutual labels:  webpack, webpack-loader
Webpack Optimization
webpack,webpack2 优化之路,(已停止更新)
Stars: ✭ 32 (-65.59%)
Mutual labels:  webpack, webpack2
Graphql Import Loader
Webpack loader for `graphql-import`
Stars: ✭ 84 (-9.68%)
Mutual labels:  webpack, webpack-loader
Vue Md Loader
✨ Markdown files to ALIVE Vue components.
Stars: ✭ 78 (-16.13%)
Mutual labels:  webpack, webpack-loader

webpack-conditional-loader


Inspired by C conditionals directive, 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

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.

module: {
  rules: [{
    test: /\.js$/,
    use: ['babel-loader', 'webpack-conditional-loader']
  }]
}

Get an example config file here

On your code

Use // #if expression and // #endif to wrap blocks of code you want to be removed if a given predicate is false.

// #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.

// #if process.env.NODE_ENV !== 'BUILD'
import reduxLogger from 'redux-logger'
// #endif

Credits


caiogondim.com  ·  GitHub @caiogondim  ·  Twitter @caio_gondim

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].