simplify-loader v0.1.0

simplify-loader

A tiny webpack plaintext pruner loader for removing useless informations.

Installation

Generally, you'll want to use this alongside webpack's raw-loader module.

yarn add -D simplify-loader
yarn add -D raw-loader

or

npm install -D simplify-loader
npm install -D raw-loader

Usage

This loader will remove all comments and useless whitespaces from target plaintext by default.

Options

Example

This example use these options below.

{
  "comment": true,
  "whitespace": true,
  "crlf": false,
  "ignore": "#include <"
}

Original Content

/*!
 * An example glsl file.
 */
#define GLSLIFY 1
#define PHYSICAL
varying vec3 vViewPosition;
#ifndef FLAT_SHADED
  varying vec3 vNormal;
#endif
#include <common>
#include <uv_pars_vertex>
//
// Description : Array and textureless GLSL 2D simplex noise function.
//      Author : Ian McEwan, Ashima Arts.
//  Maintainer : ijm
//     Lastmod : 20110822 (ijm)
//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
//               Distributed under the MIT License. See LICENSE file.
//               https://github.com/ashima/webgl-noise
//

vec3 mod289(vec3 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec2 mod289(vec2 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

Simplified Content

#define GLSLIFY 1
#define PHYSICAL
varying vec3 vViewPosition;
#ifndef FLAT_SHADED
varying vec3 vNormal;
#endif
#include <common>
#include <uv_pars_vertex>
vec3 mod289(vec3 x){
return x-floor(x*(1.0/289.0))*289.0;
}
vec2 mod289(vec2 x){
return x-floor(x*(1.0/289.0))*289.0;
}

General Config

webpack.config.js

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/i,
        use: [
          'raw-loader',
          {
            loader: 'simplify-loader',
            options: {
              comment: true,
              whitespace: true,
              crlf: false
            }
          }
        ]
      },
    ],
  },
};

.umirc.js

// .umirc.js
export default {
  urlLoaderExcludes: [
    /\.txt$/,
  ],
  chainWebpack(config) {
    config.module.rule('txt')
      .test(/\.txt$/)
      .exclude.add(/node_modules/).end()
      .use('raw-loader').loader('raw-loader').end()
      .use('simplify-loader').loader('simplify-loader').options({
        comment: true,
        whitespace: true,
        crlf: false
      }).end();
  }
}

Inline

How to use webpack loaders with inline mode

// Using require
const source = require('raw-loader!simplify-loader!./my-file.txt')

// Using ES6 import statement
import source from 'raw-loader!simplify-loader!./my-file.txt'

Config with three.js and glslify-loader

The three.js use some custom marco symbols in it's glsl codes that may cause problem after whitespace characters removing, you can use these configs below to prevent it.

The glslify-loader use some custom marco symbols to identify and inject glsl codes that may contain non-code infomations (eg. comments, author info), place glslify-loader after simplify-loader if you want to simplify them too.

webpack.config.js

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(glsl|vert|frag|gl|vs|fs|shader)$/i,
        use: [
          'raw-loader',
          {
            loader: 'simplify-loader',
            options: {
              comment: true,
              whitespace: true,
              crlf: false,
              ignore: [
                // three.js glsl macro
                '#include <'
              ]
            }
          },
          // place glslify-loader after simplify-loader if you want to simplify the codes generated by glslify too
          'glslify-loader'
        ]
      },
    ],
  },
};

.umirc.js

// .umirc.js
export default {
  urlLoaderExcludes: [
    /\.(glsl|vert|frag|gl|vs|fs|shader)$/i,
  ],
  chainWebpack(config) {
    config.module.rule('txt')
      .test(/\.(glsl|vert|frag|gl|vs|fs|shader)$/i)
      .exclude.add(/node_modules/).end()
      .use('raw-loader').loader('raw-loader').end()
      .use('simplify-loader').loader('simplify-loader').options({
        comment: true,
        whitespace: true,
        crlf: false,
        ignore: [
          // three.js glsl macro
          '#include <'
        ]
      }).end()
      // place glslify-loader after simplify-loader if you want to simplify the codes generated by glslify too
      .use('glslify-loader').loader('glslify-loader').end();
  }
}

Inline

How to use webpack loaders with inline mode

// Using require
const source = require('raw-loader!simplify-loader?{"ignore":"#include <"}!glslify-loader!./my-shader.glsl')

// Using ES6 import statement
import source from 'raw-loader!simplify-loader?{"ignore":"#include <"}!glslify-loader!./my-shader.glsl'