caiogondim / webpack-conditional-loader Goto Github PK

View Code? Open in Web Editor NEW

110.0 3.0 25.0 137 KB

C conditionals directive for JavaScript

Home Page: https://npm.im/webpack-conditional-loader

License: MIT License

JavaScript 100.00%

webpack webpack2 webpack-loader javascript optimization

webpack-conditional-loader's Introduction

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

GCC C conditional documentation

caiogondim.com · GitHub @caiogondim · Twitter @caio_gondim

webpack-conditional-loader's People

Contributors

Stargazers

Watchers

webpack-conditional-loader's Issues

Problems with the multi-compiler

I posted this to gitter:

Seems that one can't build multiple configs that depend on different ENV values.

Regarding the multi-compiler

I'm looking at issues for building client and server bundles for React web apps for https://github.com/shakacode/react_on_rails and https://github.com/rails/webpacker

Are there any advantages to https://github.com/webpack/webpack/tree/master/examples/multi-compiler vs concurrently running multiple webpack processes

Any gotchas? Can the configurations be totally different?

What are the limitations, besides possible collisions in output files?

Could there be any subtle collisions in temp files? caches?

I did run into one limitation with the webpack-conditional-loader in that it depends on env values (and not the DefinePlugin) and it's pretty clear that the concurrent nature of the multi-compiler conflicts with that.

Add #else

Can we also have the #else condition?

bug at splitting file content to lines

const sourceByLine = source.split(os.EOL)

There's bug in above code that os.EOL need to be replaced by '\n'. In case in Windows system, but line is broken only with '\n', os.EOL in Windows is '\r\n'.

const endBlock = /// #endif$/

This above still have bug that change it like this const endBlock = /// #endif/

Add configuration file with logical values

conditional-loader could be used for turning on and off features. List of features should be stored in external configuration file, to omit adding them as global variables in webpack

is it compatible with webpack 4

Hello,

This is my first attempt to use this loader but I can't make it work.
I do have NODE_ENV set but still not working

	console.log("process.env.NODE_ENV", process.env.NODE_ENV); // -> development
	// #endif
	// #if process.env.NODE_ENV === 'production'
	console.log("production Application started"); // is printed to console
	// #endif
	// #if ENV === 'development'
	console.log("development Application started"); // is printed to console
	// #endif

Both log are printed to console

Webpack 3 support

Hi there. Does it work with webpack 3. Or if no then are you planning updates?

Doesn't work

This is my webpack configuration:

rules: [
      {
        test: /\.jsx?$/,
        exclude: [/node_modules/],
        loader: ['babel-loader', 'webpack-conditional-loader']
      }
],

plugins: [
new webpack.EnvironmentPlugin({
      NODE_ENV: 'production',
      BROWSER: true
    }),
]

Then, in my file I use this:

// #if process.env.NODE_ENV !== 'production'
import moment from 'moment';
// #endif

The moment library is still imported.

It works only if I do:

// #if process.env.NODE_ENV === 'anything_other_value'
import moment from 'moment';
// #endif

This means, the process.env.NODE_ENV is undefined.

I'm using:
"webpack": "^3.9.1",
"webpack-conditional-loader": "^1.0.11",

Ignore whitespace between comment and hash

I had a problem where my declarations didn't have whitespace:

//#if process.env.NODE_ENV !== 'production'
...
//#endif

It would be nice if the whitespace between // and # could be ignored.

Eslint, any way to have it use the output of the webpack-conditional-loader

I'm conditionally using dynamic code splitting using loadable-components.com.

Any way to get eslint to better handle a file that has multiple imports for the same file?

I guess another way to state this:

Is there any way to get eslint to use this plugin? That way an env value can be set and the code can be properly linted.

 16:28  error  Parse errors in imported module './Container': Line 10: Identifier 'Container' has already been declared

Support HTML comments

In HTML files, it would be nice to use the same #if ... logic but nested in HTML comments.

DefinePlugin - not seeing variables

I am using define plugin to set some environment variables,
The loader doesn't seem to be picking them up?

Unnecessary line in webpack.js

webpack-conditional-loader/webpack.js

Line 2 in 0cf94ab

const conditionalLoader = require('./src')

not needed as path is used further in the code instead of that constant

Does not work with nativescript

I configured as guided by the document and I debugged this plugin, found that it does have commented all matching conditional parts.

However, the final bundle file does not have commented.

source

    // #if process.env.APP_NAME === 'M'
    alert('Hello M');
    // #endif

    // #if process.env.APP_NAME === 'U'
    alert('Hello U');
    // #endif

debug output:

    // #if process.env.APP_NAME === 'M'
//    alert('Hello M');
    // #endif

    // #if process.env.APP_NAME === 'U'
//    alert('Hello U');
    // #endif

bundle js:

    AComponent.prototype.onTap = function () {
        var _this = this;
        // #if process.env.APP_NAME === 'M'
        alert('Hello M');
        // #endif
        // #if process.env.APP_NAME === 'U'
        alert('Hello U');
        // #endif

Broken with Babel 7

First off, thanks for this awesome tool. This was a lifesaver for me when I needed exactly this functionality a couple months ago.

Unfortunately, I just updated my project to Babel 7 and found that the loader was no longer working correctly.

In development mode, things seem to be working fine. If, on the other hand, I build my project, the #if statements are seen as regular comments.

I have to admit it's kind of strange that an upgrade to Babel 7 would cause this but I've checked it several times. Happy to help you reproduce it too.

FWIW, I'm on the latest version of Webpack (4.17.1) and everything was working great until I updated Babel.