defines-loader

npm install defines-loader  or yarn add defines-loader

Helps to disable parts of the code depending on preprocessor directives.

Syntax

1. //#directives
2. /* #directive */
3. <!-- #directive -->;

Supported directives

ifdef - If defined, start a new block
elif  - If the directive was false, use the else if block
else  - If the directive was false, use the else block
endif - Ends a block

Example

webpack.config

        ...webpack config start
        module{
            rules:[
                 {
                    enfore:'pre',  // make sure enable enforce
                    test:/\.(js|css|vue)$/,
                    loader:'defines-loader',
                    options:{
                            defines:{
                                    DEBUG:true
                            }
                    }
                 }
            ]
        }
        ...rest webpack config

JS/TS file

//#ifdef DEBUG
import mod from 'mod'
//#else
import mode from 'mod'
//#endif

JSX

import React from "react";

function Components() {
    return (
        <div>
            {/* #ifdef DEBUG */}
            debug mode
            {/* #else */}
            PRODUCTION mode
            {/* #endif */}
        </div>
    );
}

Style file

/* #ifdef DEBUG */
#app{
    background-color:red
}
/* #else */
#app{
    background-color:black
}
/* #endif */

Vue file

    <template>
        <div>
            <!-- #ifdef DEBUG -->
            <div>DEBUG mode</div>
            <!-- #else -->
            <div>other mode</div>
            <!-- #endif -->
        </div>
    </template>
    <script>
        export default {
            name: "vue-template",
            data(){

                return  {
                    //#ifdef DEBUG
                    SOME_USE_ONLY_IN_DEBUG:'SOME_VALUE',
                    //#endif
                }

            },
            //#ifdef DEBUG
            mounted() {},
            //#endif
        };
    </script>
    <style lang="css">
        /* #ifdef DEBUG */
            #app{
            display: flex;
            }
        /* #endif*/
            #app{
                display:  block;
            }
    </style>