Skip to content

yclients/advanced-preprocess-loader

 
 

Repository files navigation

advanced-preprocess-loader for webpack

This is fork of preprocess-loader

Webpack loader uses preprocess to preprocess HTML, Javascript, and other module files based on custom or environment configurations.

Inspired by gulp-preprocess and coffee-loader.

Usage

This loader is used within loader-chain before other loaders doing 'real' job.

var exports = require('coffee!preprocess?+DEBUG&NODE_ENV=production!./file.coffee')

Webpack Doc: Using Loaders

loadUtils.parseQuery examples

null                   -> {}
?                      -> {}
?flag                  -> { flag: true }
?+flag                 -> { flag: true }
?-flag                 -> { flag: false }
?xyz=test              -> { xyz: "test" }
?xyz[]=a               -> { xyz: ["a"] }
?flag1&flag2           -> { flag1: true, flag2: true }
?+flag1,-flag2         -> { flag1: true, flag2: false }
?xyz[]=a,xyz[]=b       -> { xyz: ["a", "b"] }
?a%2C%26b=c%2C%26d     -> { "a,&b": "c,&d" }
?{json:5,data:{a:1}}   -> { json: 5, data: { a: 1 } }

webpack.config file

{
  module: {
    loaders: [{
        test: /\.coffee$/
        loader: 'coffee!preprocess?+DEBUG&NODE_ENV=production'
    }, {
        test: /\.cjsx$/
        loader: 'coffee!cjsx!preprocess?+DEBUG&NODE_ENV=production'
    }, {
        test: /\.test_pp_options$/
        loader: "coffee!cjsx!preprocess?{DEBUG:true,ppOptions:{type:'cjsx'}}"
    }, {
        test: /\.js$/
        loader: 'babel-loader!preprocess?+DEBUG'
    }]
  }
}

Loader supports .cjsx as an alias type of .coffee.

You can override default preprocess options by passing ppOptions object in query. See preprocess API for available options.

Example HTML

<head>
  <title>Your App

  <!-- @if NODE_ENV='production' -->
  <script src="some/production/lib/like/analytics.js"></script>
  <!-- @endif -->

</head>
<body>
  <!-- @ifdef DEBUG -->
  <h1>Debugging mode - <!-- @echo RELEASE_TAG --> </h1>
  <!-- @endif -->
  <p>
  <!-- @include welcome_message.txt -->
  </p>
</body>

Example Javascript

var configValue = '/* @echo FOO */' || 'default value';

// @ifdef DEBUG
someDebuggingCall()
// @endif

Example Coffeescript

configValue = '/* @echo FOO */' or 'default value'
# @ifdef DEBUG
somDebuggingCall()
# @endif

@echo block won't be processed in coffee/shell type unless applying another preprocess loading after it is compiled to javascript.

loader: "preprocess?{ppOptions:{type:'js'}}!coffee!cjsx!preprocess?{DEBUG:true,ppOptions:{type:'cjsx'}}"

More examples can be found in README of preprocess.

Licences

MIT

About

preprocess loader module for webpack

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 33.2%
  • TypeScript 30.1%
  • CoffeeScript 28.1%
  • PHP 4.7%
  • HTML 3.9%