1.0.0 • Published 7 years ago
pattern-loader v1.0.0
placeholder-loader
webpack loader.
Installation
npm install placeholder-loader --save
yarn add placeholder-loader
Usage
Loader options have been passed as an object
const webpackConfig = {
module: {
rules: [{
test: /\.(js|jsx|ts)$/,
use: [{
loader: 'placeholder-loader',
options: {
pattern: 'anystringhere',
handler: handler
}
}],
}],
},
}
Loader options have been passed as a query string
const webpackConfig = {
module: {
rules: [{
test: /\.(js|vue|jsx|ts)$/,
use: [
'placeholder-loader?pattern=anystringhere&handler=handlerPath'
],
}],
},
}
options
options: {
pattern: [string|RegExp],
handler: [function|string],
[forceRegExp]: [any],
[flags]: [string],
}
mandatory:
pattern
- pattern to search in a processing file.handler
- function with will be invoked
optional:
- forceRegExp - shows that pattern, even passed like a string, must become a RegExp
- flags - will be user to create RegExp from pattern in case when forceRegExp present
pattern = new RegExp(pattern, flags)
(see more at MDN - RegExp).
handler
handler
is invoked if the string in placeholder
been found in a processing file.
If handler
return a string it will be used to replace placeholder
.
function handler() {
console.dir(arguments, {colors: true, depth: null});
console.dir(this, {colors: true, depth: null});
// Do something
};
- this and arguments - same that in loader (see more at webpack Loader API).
In case option handler
is a string, loader looking in project for a file with appropriate name and 'require' it'.
handler.js:
module.exports = function() {
// Do something
}
Usage with the vue-loader
const webpackConfig = {
module: {
rules: [{
test: /\.vue$/,
use: [{
loader: 'vue-loader',
options : {
preLoaders: {
js: 'placeholder-loader?pattern=anystringhere&handler=handlerPath'
}
}
}
]
}],
},
}
1.0.0
7 years ago