webpack-dists-loader

The [webpack-dists-loader] library exported as Node.js modules.

Installation

Using npm:

$ npm i -g npm
$ npm i webpack-dists-loader --save-dev

Background

In our project, we always need to change code blocks when the environment has been changed. we usually have several way to decide which code blocks we should remain, for example:

1: by using branch structure

if(env === 'development'){
    console.log(a)
} else {
    console.log(b)
}

2:delete code blocks when environment changed (not safe) 3:change the compilation entry (bad)

specially, if you want to import packages, you may coding like this:

if(env === 'development'){
    import(a)
} else {
    import(b)
}

as you can see, they are not the best way to deal with such problems. so we introduce an easy way to solve this: by config a code pretreatment tool to decide which code should remain in specific environment after compilation

In Node.js:

// webpack.config.js

// important! please set the options.env to choose which environment you want to use the loader, and set the process.env.NODE_ENV at the entry file 
process.env.NODE_ENV = 'production'

// like js, but css,html the same way
// debug tag means that if you want to remain the code ONLY IN development
// debug tag means that if you want to remain the code ONLY IN production
// special tag means that if you want to remain the code IN development and preview
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.js$/,
            use:[
                {
                    loader: 'webpack-dists-loader',
                    options: {
                                  debug: {
                                      env: ['development'],
                                      tag: 'debug'
                                  },
                                  online: {
                                      env: ['production'],
                                      tag: 'online',
                                      specials: { // remian in preview
                                          'gear': 'gear'
                                      }
                                  }
                                }
                },
                {
                    loader: 'babel-loader'
                }
            ],
            include: [resolve('src'), resolve('node_modules/webpack-dev-server/client')]
        }]
    }
};

In js,css and html file,use comments and wrap the code with the special tags js file(input)

console.log('abc')

/*<debug>*/ //we only need mock in development
import mockjs from 'mockjs'
/*</debug>*/ 

/*<gear>/ //we need console in development and preview
import eruda from 'eruda'
/*</gear>/

/*<online*/
console.log('I`m online') //only in production should show
/*</online>*/

js file (output) compiled, code blocks that wrapped with the special tags has been removed

// IN development (npm run dev)
import eruda from 'eruda'

// IN production
console.log('I`m online')

// IN preview
import mockjs from 'mockjs'

import eruda from 'eruda'

css file (input)

.a {
    ...
}

.b {
    ...
}

/*<debug>*/
.c {
    ...
}
/*</debug>*/

css file (output)

.a {
    ...
}

.b {
    ...
}

html file (input)

<div class="a"></div>
<div class="b"></div>

<!--debug-->
<div class="c"></div>
<!--/debug-->

html file (output)

<div class="a"></div>
<div class="b"></div>

Notice

if dealing with js file, please use it before other loaders. It`s only supports js,css and html files now.other file types(like vue etc) will be supported in later release.