simplify-loader
v0.1.0
Published
A tiny webpack plaintext pruner loader for removing useless informations.
Downloads
2
Readme
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
Option | Type | Default | Desciption :-: | :-: | :-: | :- comment | boolean | true | Remove all "//..." and "/.../" comments. whitespace | boolean | true | Remove all useless whitespace characters. crlf | boolean | false | Remove all CRLF characters. WARNING: May cause unexpected problems. ignore | string | RegExp | Array<string | RegExp> | undefined | The ignored symbols that will not be removed.
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'