Nautical Pace Marker


    2.1.0 • Public • Published


    A webpack loader for doing generic block-processing. You provide the delimiters and processor, block-loader will find your data and pass it through your processor.


    npm install block-loader

    Write your own block loader

    var blockLoader = require('block-loader');
    var options = {
      start: '...',
      end: '...',
      preprocessors: [
        function(content) { ...; return content; },
      process: function(content) {
        return content;
    module.exports = blockLoader(options);

    start and end are delimiter strings for you data block, preprocessors is optional and takes an array of function(content).

    Example: write real code in "pre" elements

    Say you need to write real programming code in <pre> elements, and you want to just write code, not hand-craft every html entity for less than or ampersand symbols just so your Webpack/React build won't bread on them.

    Let's just write a quick and easy loader that'll fix those things for us:

    var blockLoader = require("./block-loader");
    var options = {
      start: "<pre>",
      end: "</pre>",
      process: function fixPreBlocks(pre) {
        var replaced = pre
        .replace(options.start,'')   // first, remove the start/end delimiters, then:
        .replace(options.end,'')     //
        .replace(/&/g,'&amp;')       // 1. use html entity equivalent,
        .replace(/</g,'&lt;')        // 2. use html entity equivalent,
        .replace(/>/g,'&gt;')        // 3. use html entity equivalent,
        .replace(/([{}])/g,"{'$1'}") // 4. JSX-safify curly braces,
        .replace(/\n/g,"{'\\n'}");   // 5. and preserve line endings, thanks.
        // done! return with the delimiters put back in place
        return options.start + replaced + options.end
    module.exports = blockLoader(options);

    And done. Save this as something like ./lib/pre-loader.js and then we can use this with webpack by adding it to webpack.config.js:

    module.exports = {
      entry:  ...,
      output: ...,
      module: {
        loaders: [
            test: /.jsx?$/,
            loaders: [
              __dirname + '/lib/pre-loader'

    Remember that webpack loaders run LIFO, so the ones that need to kick in first need to be declared last in the array of loaders.


    npm i block-loader

    DownloadsWeekly Downloads






    Last publish


    • pomax