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.
This loader is used within loader-chain before other loaders doing 'real' job.
var exports = require('coffee!preprocess?+DEBUG&NODE_ENV=production!./file.coffee')
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 } }
const config = {
module: {
loaders: [
{
test: /\.js$/,
use: [
{
loader: 'preprocess-loader',
options: {
foo: true,
bar: 'baz'
ppOptions: {
type: 'js'
}
}
}
]
}
]
}
};{
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.
<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>var configValue = '/* @echo FOO */' || 'default value';
// @ifdef DEBUG
someDebuggingCall()
// @endifconfigValue = '/* @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.
MIT