Skip to content
This repository has been archived by the owner on Mar 21, 2023. It is now read-only.

dearrrfish/preprocess-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

preprocess-loader for webpack

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

Webpack 2+ (Thanks @scholtzm)
const config = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'preprocess-loader',
            options: {
              foo: true,
              bar: 'baz'
              ppOptions: {
                type: 'js'
              }
            }
          }
        ]
      }
    ]
  }
};
Webpack 1
{
  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