@mixer/preprocessor-loader

    1.0.2 • Public • Published

    preprocessor-loader

    npm version Build Status

    Link to preprocess documentation

    preprocessor-loader is a webpack loader that allows conditional compilation of HTML/TS/CSS via comment 'directives'. It's essentially a very minimalistic C/C++ preprocessor language and to interoperate fully with other templating engines and build tools.

    For example, you can have split styling for a "desktop" and "xbox" build:

    <h1>Hello World</h1>
     
    <!-- @if PLATFORM == 'desktop' -->
    <p>You're on our desktop build!</p>
    <!-- @endif -->
    <!-- @if PLATFORM == 'mobile' -->
    <p>You're on our mobile build!</p>
    <!-- @endif -->

    The result of building the above targeting the mobile platform would be:

    <h1>Hello World</h1>
     
    <p>This is only on mobile</p>

    Usage

    Your webpack.config.js might look something like this:

    module.exports = {
      // ...
      module: {
        loaders: [
          {
            test: /\.html$/,
            loaders: ['raw-loader', '@mcph/preprocessor-loader?_type=html&PLATFORM=' + platform]
          },
          {
            test: /\.ts$/,
            loaders: ['raw-loader', '@mcph/preprocessor-loader?_type=ts&PLATFORM=' + platform]
          },
          {
            test: /\.scss$/,
            loaders: ['raw-loader', '@mcph/preprocessor-loader?_type=scss&PLATFORM=' + platform]
          }
        ]
      }
    };

    The loader can take any number of key/value pairs, with each key representing what you want to compile against, and each value representing what you want that key to be. In this case, we specified that we only want to compile <!-- @if PLATFORM == 'mobile' --> and want everything else to be stripped out.

    Install

    npm i @mixer/preprocessor-loader

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    4.59 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar